CSS3 用户界面、图片、按钮

news2024/11/28 8:46:51

一、CSS3用户界面：

在CSS3中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性：resize、box-sizing、outline-offset。

1、resize：

resize属性指定一个元素是否应该由用户去调整大小。

<style>

div

{

border:2px solid;

padding:10px 40px;

width:300px;

resize:both;

overflow:auto;

}

</style>

2、box-sizing：

box-sizing属性允许以确切的方式定义适应某个区域的具体内容。

<style>

#example1 {

  box-sizing: content-box;  

  width: 300px;

  height: 100px;

  padding: 30px;  

  border: 10px solid blue;

}

#example2 {

  box-sizing: border-box;

  width: 300px;

  height: 100px;

  padding: 30px;  

  border: 10px solid blue;

}

</style>

3、outline-offset：

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同：轮廓不占用空间；轮廓可能是非矩形。

<style>

div

{

margin:20px;

width:150px;

padding:10px;

height:70px;

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}

</style>

CSS3用户界面特性： 

二、CSS3图片：

1、圆角图片：

<style>

Img2 {

    border-radius: 8px;

}

Img1 {

    border-radius: 50%;

}

</style>

2、缩略图：

<style>

a {

    display: inline-block;

    border: 1px solid blue;

    border-radius: 4px;

    padding: 5px;

    transition: 0.3s;

}

a:hover {

    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}

</style>

3、响应式图片：

响应式图片会自动适配各种尺寸的屏幕。图片放大的尺寸不大于其原始的最大值。

<style>

img {

    max-width: 100%;

    height: auto;

}

</style>

4、图片文本：

<style>

.container {

    position: relative;

}

.center {

    position: absolute;

    left: 0;

    top: 50%;

    width: 100%;

    text-align: center;

    font-size: 18px;

margin-top:-9px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}

</style>

5、卡片式图片：

<style>

body {margin:25px;}

div.polaroid {

  width: 80%;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin-bottom: 25px;

}

div.container {

  text-align: center;

  padding: 10px 20px;

}

</style>

6、图片滤镜：

Css filter属性为元素添加可是效果（如模糊、饱和度）

<style>

img {

    width: 33%;

    height: auto;

    float: left;

    max-width: 235px;

}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}

.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}

.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

.invert {-webkit-filter: invert(100%);filter: invert(100%);}

.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

.saturate {-webkit-filter: saturate(7); filter: saturate(7);}

.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

</style>

7、响应式图片相册：

<style>

div.img {

    border: 1px solid #ccc;

}

div.img:hover {

    border: 1px solid #777;

}

div.img img {

    width: 100%;

    height: auto;

}

div.desc {

    padding: 15px;

    text-align: center;

}

* {

    box-sizing: border-box;

}

.responsive {

    padding: 0 6px;

    float: left;

    width: 24.99999%;

}

@media only screen and (max-width: 700px){

    .responsive {

        width: 49.99999%;

        margin: 6px 0;

    }

}

@media only screen and (max-width: 500px){

    .responsive {

        width: 100%;

    }

}

.clearfix:after {

    content: "";

    display: table;

    clear: both;

}

</style>

8、图片模态：

<style>

#myImg {

    border-radius: 5px;

    cursor: pointer;

    transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (image) */

.modal-content {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

}

/* Caption of Modal Image */

#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #ccc;

    padding: 10px 0;

    height: 150px;

}

/* Add Animation */

.modal-content, #caption {    

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

}

@-webkit-keyframes zoom {

    from {-webkit-transform: scale(0)}

    to {-webkit-transform: scale(1)}

}

@keyframes zoom {

    from {transform: scale(0.1)}

    to {transform: scale(1)}

}

/* The Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}

.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

    .modal-content {

        width: 100%;

    }

}

</style>

三、CSS3按钮：

1、按钮颜色：

<style>

.button {

    background-color: #4CAF50; /* 绿色 */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button2 {background-color: #008CBA;} /* 蓝色 */

.button3 {background-color: #f44336;} /* 红色 */

.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */

.button5 {background-color: #555555;} /* 黑色 */

</style>

2、按钮大小：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

</style>

3、圆角按钮：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

</style>

4、按钮边框颜色：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {

    background-color: white;

    color: black;

    border: 2px solid #4CAF50;

}

.button2 {

    background-color: white;

    color: black;

    border: 2px solid #008CBA;

}

.button3 {

    background-color: white;

    color: black;

    border: 2px solid #f44336;

}

.button4 {

    background-color: white;

    color: black;

    border: 2px solid #e7e7e7;

}

.button5 {

    background-color: white;

    color: black;

    border: 2px solid #555555;

}

</style>

5、鼠标悬停按钮：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

}

.button1 {

    background-color: white;

    color: black;

    border: 2px solid #4CAF50;

}

.button1:hover {

    background-color: #4CAF50;

    color: white;

}

.button2 {

    background-color: white;

    color: black;

    border: 2px solid #008CBA;

}

.button2:hover {

    background-color: #008CBA;

    color: white;

}

.button3 {

    background-color: white;

    color: black;

    border: 2px solid #f44336;

}

.button3:hover {

    background-color: #f44336;

    color: white;

}

.button4 {

    background-color: white;

    color: black;

    border: 2px solid #e7e7e7;

}

.button4:hover {background-color: #e7e7e7;}

.button5 {

    background-color: white;

    color: black;

    border: 2px solid #555555;

}

.button5:hover {

    background-color: #555555;

    color: white;

}

</style>

6、按钮阴影：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

}

.button1 {

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.button2:hover {

    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

</style>

7、禁用按钮：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.disabled {

    opacity: 0.6;

    cursor: not-allowed;

}

</style>

8、按钮宽度：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {

    padding-left: 0;

    padding-right: 0;

    width: 100%;

}

</style>

9、按钮组：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    float: left;

}

.button:hover {

    background-color: #3e8e41;

}

</style>

10、带边框按钮组：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: 1px solid green;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    float: left;

}

.button:hover {

    background-color: #3e8e41;

}

</style>

11、按钮动画：

<style>

.button {

  display: inline-block;

  border-radius: 4px;

  background-color: #f4511e;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 200px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}

.button span:after {

  content: '»';

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}

.button:hover span {

  padding-right: 25px;

}

.button:hover span:after {

  opacity: 1;

  right: 0;

}

</style>

波纹效果：

<style>

.button {

    position: relative;

    background-color: #4CAF50;

    border: none;

    font-size: 28px;

    color: #FFFFFF;

    padding: 20px;

    width: 200px;

    text-align: center;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

}

.button:after {

    content: "";

    background: #90EE90;

    display: block;

    position: absolute;

    padding-top: 300%;

    padding-left: 350%;

    margin-left: -20px!important;

    margin-top: -120%;

    opacity: 0;

    transition: all 0.8s

}

.button:active:after {

    padding: 0;

    margin: 0;

    opacity: 1;

    transition: 0s

}

</style>

按压效果：

<style>

.button {

  display: inline-block;

  padding: 15px 25px;

  font-size: 24px;

  cursor: pointer;

  text-align: center;   

  text-decoration: none;

  outline: none;

  color: #fff;

  background-color: #4CAF50;

  border: none;

  border-radius: 15px;

  box-shadow: 0 9px #999;

}

.button:hover {background-color: #3e8e41}

.button:active {

  background-color: #3e8e41;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

}

</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1192521.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

YOLOv5 - common.py文件解读

YOLOv5 - common.py文件解读

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客 &#x1f366; 参考文章&#xff1a;365天深度学习训练营 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制](https://mtyjkh.blog.csdn.net/) &#x1f680; 文章来源&#xff1a;[K同学的学…
阅读更多...
霍尔电流传感器如何进行可靠性测试？主要应用在哪些领域？

霍尔电流传感器如何进行可靠性测试？主要应用在哪些领域？

霍尔电流传感器广泛应用于航空航天、电源监测、飞行器状态监测、变速驱动设备、焊接设备供电电源、新能源汽车蓄电池管理系统等领域&#xff0c;在电流检测领域中有着重要地位和实用价值&#xff0c;在电驱系统中被称为新能源汽车的动力“心脏”。因此&#xff0c;霍尔电流传感…
阅读更多...
Java枚举类的使用

Java枚举类的使用

说明: 根据设计图抽象的枚举类,一张模板背景图(会改变),二维码(传入参数生成),一个关闭的icon(固定不变) 设计图如下 枚举类 去除重复模板后共五个,根据需求编写枚举类如下,url则对应不同的模板,编写成后台人员的可配置项, public enum ImageTemplateEnum {PURCHASE("p…
阅读更多...
3.前端调式

3.前端调式

1. Elements 先来看这张图最上头的一行是一个功能菜单&#xff0c;每一个菜单都有它相应的功能和使用方法&#xff0c;依次从左往右来看 箭头按钮 用于在页面选择一个元素来审查和查看它的相关信息&#xff0c;当我们在Elements这个按钮页面下点击某个Dom元素时&#xff0c;箭…
阅读更多...
【EI会议征稿】第三届能源动力与控制工程国际学术会议（EPECE 2024）

【EI会议征稿】第三届能源动力与控制工程国际学术会议（EPECE 2024）

第三届能源动力与控制工程国际学术会议&#xff08;EPECE 2024&#xff09; The 3rd International Conference on Energy and Power Engineering, Control Engineering (EPECE 2024) 第三届能源动力与控制工程国际学术会议&#xff08;EPECE 2024&#xff09;将于2024年2月2…
阅读更多...
如何用Python3+requests+unittest实现接口自动化测试实战

如何用Python3+requests+unittest实现接口自动化测试实战

一、Requests介绍 首先让我们来看 Requests 官方的介绍&#xff1a; Requests is an elegant and simple HTTP library for Python, built for human beings. 翻译过来就是&#xff1a;Requests 是为人类写的一个优雅而简单的 Python HTTP 库。这个介绍很直白了&#xff0c;…
阅读更多...
SUB-1G芯片--PAN3028 一款低功耗远距离无线收发芯片

SUB-1G芯片--PAN3028 一款低功耗远距离无线收发芯片

PAN3028 是一款采用 ChirpIoT TM 调制解调技术的低功耗远距离无线收发芯片&#xff0c;支持半双工无线通信&#xff0c;工作频段为 370~590 MHz 和 740~1180MHz&#xff0c;该芯片具有高抗干扰性、高灵敏度、低功耗和超远传输距离等特性。最高具有-140dBm 的灵敏度&#xff0c;…
阅读更多...
逐步学习 Swagger enum：从入门到精通

逐步学习 Swagger enum：从入门到精通

enum 是 Swagger 规范中用来定义枚举类型的一种方式。它允许开发者在 API 文档中明确列出该接口的参数、返回值或请求体中可接受的枚举值。通过使用 Swagger enum&#xff0c;开发者可以更清晰地描述 API 的输入和输出&#xff0c;提高 API 文档的可读性和可维护性。 enum 使用…
阅读更多...
《QT从基础到进阶·十八》QT中的各种鼠标事件QEvent

《QT从基础到进阶·十八》QT中的各种鼠标事件QEvent

1、界面标题栏事件&#xff1a; NonClientAreaMouseButtonPress 标题栏点击事件 NonClientAreaMouseButtonRelease 标题栏释放事件 bool CustomPopDialog::event(QEvent* event) {switch (event->type()){case QEvent::MouseButtonRelease://Event of mouse releasing wind…
阅读更多...
基于 HarmonyOS 的 HTTPS 请求过程开发示例（ArkTS）

基于 HarmonyOS 的 HTTPS 请求过程开发示例（ArkTS）

介绍 本篇 Codelab 基于网络模块以及 Webview 实现一次 HTTPS 请求&#xff0c;并对其过程进行抓包分析。效果如图所示&#xff1a; 相关概念 ● Webview&#xff1a;提供 Web 控制能力&#xff0c;Web 组件提供网页显示能力。 ● HTTP数据请求&#xff1a;网络管理模块&am…
阅读更多...
6、规划绩效域

6、规划绩效域

1、变更 &#xff08;1&#xff09;变更有哪几种原因&#xff08;类型&#xff09;&#xff1f; 纠正措施&#xff08;比如进度落后了&#xff0c;我们会有赶工和快速跟进的措施&#xff09; 缺陷补救 预防措施 更新措施 2、变更的目的和变更控制流程的意义 考点1&#…
阅读更多...
Vue框架项目，给容器添加水印watermark

Vue框架项目，给容器添加水印watermark

1、在/utils下新增一个名为waterMark.js的脚本 具体水印样式可以在代码里自行调节style 参数 - 水印内容, 加水印的容器, 是否显示时间 let watermark {};function getCurrentDateTime() {const now new Date();const year now.getFullYear();const month String(now.ge…
阅读更多...
Vue入门教学——编写第一个页面

Vue入门教学——编写第一个页面

以Vue2.0为例子。 1、创建一个Vue项目 创建过程&#xff1a;Vue-cli&#xff08;脚手架&#xff09;的创建_vue脚手架创建项目命令-CSDN博客【注】项目名不能有大写字母。创建完毕后&#xff0c;使用VSCode打开项目文件夹&#xff08;其他编辑器也行&#xff09;。 2、运行项…
阅读更多...
人声与背景音乐源分离

人声与背景音乐源分离

一.人声分离项目说明 人声分离是将音频录音分离为各个源的任务。该存储库是音乐源分离的 PyTorch 实现。用户可以通过安装此存储库将自己喜欢的歌曲分成不同的来源。用户还可以训练自己的源分离系统。该存储库还可用于训练语音增强、乐器分离和任何分离系统。 2.1 环境配置 …
阅读更多...
嵌入式开发：ST-LINK V2.1仿真器，Type-C接口

嵌入式开发：ST-LINK V2.1仿真器，Type-C接口

标题ST-LINK V2.1仿真器&#xff0c;Type-C接口 之前做的版本虽然也是V2.1的&#xff0c;但使用的接口是USB的Micro形式&#xff0c;不支持正反插&#xff0c;也不兼容现在通用的手机数据线&#xff0c;出差的时候又要多带一条线。 现在终于把我的ST-LINK的接口改了一下 如下…
阅读更多...
修改Android Studio默认的gradle目录

修改Android Studio默认的gradle目录

今天看了一下&#xff0c;gradle在C盘占用了40多G。我C盘是做GHOST的&#xff0c;放在这里不方便。所以就要修改。 新建目录名&#xff08;似乎无必要&#xff09; ANDROID_SDK_HOMEG:\SOFTWARES\android-sdk GRADLE_USER_HOMEG:\SOFTWARES\.gradle 修改目录 File->Setti…
阅读更多...
“探秘！根据关键词搜索商品列表的虾皮API大揭露！“

“探秘！根据关键词搜索商品列表的虾皮API大揭露！“

要使用虾皮API根据关键词获取商品列表&#xff0c;您需要使用虾皮API的搜索功能。以下是使用Python和虾皮API根据关键词获取商品列表的基本步骤&#xff1a; 注册虾皮API账号并获取API凭证&#xff08;访问虾皮开放平台并创建应用以获取API凭证&#xff09;。安装必要的Python…
阅读更多...
软件学习心得

软件学习心得

标定表示&#xff1a;通过不断修改软件控制参数&#xff0c;使得系统得到最佳运行状态 通过xcp协议进行标定&#xff08;XCP寻址的通讯方式&#xff09; A2L文件是上位机解析ECU描述文件数据库&#xff1a;存放了变量名称、数据格式、转换规则&#xff0c;还存放了ECU的通讯信息…
阅读更多...
python 把函数的值赋给变量

python 把函数的值赋给变量

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 一个是模块的调用和一个自定义函数返回值赋值给变量 编写一个简单的函数模块&#xff1a; def run(name): list1 hello namereturn list1编写一个调用的脚…
阅读更多...
Avalonia播放视频（mp4）

Avalonia播放视频（mp4）

1.Nuget添加类库Dove.Avalonia.Extensions.Media&#xff0c;项目路径https://github.com/michael-eddy/Avalonia.Extensions/ 2.Nuget添加VideoLAN.LibVLC.Windows PlatformLibVLC PackageMinimum OS VersionWindowsVideoLAN.LibVLC.WindowsWindows XPUWPVideoLAN.LibVLC.UW…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023