CSS3 用户界面、图片、按钮

一、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.rhkb.cn/news/187427.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Azure 机器学习 - 有关为 Azure 机器学习配置 Kubernetes 群集的参考

Azure 机器学习 - 有关为 Azure 机器学习配置 Kubernetes 群集的参考

目录 受支持的 Kubernetes 版本和区域建议的资源计划ARO 或 OCP 群集的先决条件禁用安全增强型 Linux (SELinux)ARO 和 OCP 的特权设置 收集的日志详细信息Azure 机器学习作业与自定义数据存储连接支持的 Azure 机器学习排斥和容许最佳实践 通过 HTTP 或 HTTPS 将其他入口控制器…
阅读更多...
DAY50 309.最佳买卖股票时机含冷冻期 + 714.买卖股票的最佳时机含手续费

DAY50 309.最佳买卖股票时机含冷冻期 + 714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期 题目要求&#xff1a;给定一个整数数组&#xff0c;其中第 i 个元素代表了第 i 天的股票价格 。 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09;: 你不…
阅读更多...
vue2+elementui使用MessageBox 弹框$msgbox自定义VNode内容：实现radio

vue2+elementui使用MessageBox 弹框$msgbox自定义VNode内容：实现radio

虽说实现下面的效果&#xff0c;用el-dialog很轻松就能搞定。但是这种简单的交互&#xff0c;我更喜欢使用MessageBox。 话不多说&#xff0c;直接上代码~ <el-button type"primary" size"mini" click"handleApply()" >处理申请</el-b…
阅读更多...
【Git】Git图形化工具SSH协议IDEA集成Git的使用讲解

【Git】Git图形化工具SSH协议IDEA集成Git的使用讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Git》。&#x1f3af;&#x1f3af; &#x1f449…
阅读更多...
git命令之遭遇 ignore罕见问题解决

git命令之遭遇 ignore罕见问题解决

我先来讲讲背景 我的一些文件在ignore了&#xff0c;不会被提交到远程仓库&#xff0c;这时候我的远程仓库中是没有这几个文件的&#xff0c;这时候我如果使用 git reset 的话这时候除了那几个 ignore 的文件以外都被更新的&#xff0c;但是如果我不需要这几个被 ignore 的文件…
阅读更多...
蓝桥杯之模拟与枚举day1

蓝桥杯之模拟与枚举day1

Question1卡片(C/CA组第一题) 这个是一道简单的模拟枚举题目&#xff0c;只要把对应每次的i的各个位都提取出来&#xff0c;然后对应的卡片数目减去1即可。属于打卡题目。注意for循环的特殊使用即可 #include <iostream> using namespace std; bool solve(int a[],int n…
阅读更多...
NSS [鹏城杯 2022]压缩包

NSS [鹏城杯 2022]压缩包

NSS [鹏城杯 2022]压缩包 考点&#xff1a;条件竞争/逻辑漏洞&#xff08;解压失败不删除已经解压文件&#xff09; 参考&#xff1a;回忆phpcms头像上传漏洞以及后续影响 | 离别歌 (leavesongs.com) 源码有点小多 <?php highlight_file(__FILE__);function removedir($…
阅读更多...
大模型+人形机器人，用AI唤起钢筋铁骨

大模型+人形机器人，用AI唤起钢筋铁骨

《经济参考报》11月8日刊发文章《多方布局人形机器人赛道,智能应用前景广》。文章称&#xff0c;工信部日前印发的《人形机器人创新发展指导意见》&#xff0c;按照谋划三年、展望五年的时间安排&#xff0c;对人形机器人创新发展作了战略部署。 从开发基于人工智能大模型的人…
阅读更多...
CCLink转Modbus TCP网关_MODBUS报文配置

CCLink转Modbus TCP网关_MODBUS报文配置

兴达易控CCLink转Modbus TCP网关是一种功能强大的设备&#xff0c;可实现两个不同通信协议之间的无缝对接。它能够将CCLink协议转换为Modbus TCP协议&#xff0c;并通过报文配置实现灵活的通信设置。兴达易控CCLink转Modbus TCP网关可以轻松实现CCLink和Modbus TCP之间的数据转…
阅读更多...
汇编-EQU伪指令(数值替换)

汇编-EQU伪指令(数值替换)

EQU伪指令将一个符号名称与一个整数表达式或一个任意文本相关联&#xff0c; 它有3种格式 在第一种格式中&#xff0c; expression必须是一个有效的整数表达式。在第二种格式中&#xff0c; symbol是一个已存在的符号名称&#xff0c; 已经用或EQU定义过。在第三种格式中&…
阅读更多...
新方向！文心一言X具身智能，用LLM大模型驱动智能小车

新方向！文心一言X具身智能，用LLM大模型驱动智能小车

具身智能已成为近年来研究的热点领域之一。具身智能强调将智能体与实体环境相结合&#xff0c;通过智能体与环境的交互&#xff0c;来感知和理解世界&#xff0c;最终实现在真实环境中的自主决策和运动控制。 如何基于文心大模型&#xff0c;低成本入门“具身智能”&#xff0…
阅读更多...
GEE：将鼠标变成十字指针，点击获取影像值，显示值到UI中

GEE：将鼠标变成十字指针，点击获取影像值，显示值到UI中

作者：CSDN @ _养乐多_ 本文记录了在 Google Earth Engine（GEE）开发中，将鼠标变成十字指针，点击获取影像值，显示值到UI中的代码片段。这段代码复制过去修改变量名就可以用了。 效果如下图所示， 文章目录 一、代码片段一、代码片段 使用的时候将 YLDImage 变量换成你屏…
阅读更多...
【网络协议】

【网络协议】

网络协议 1 网络通讯1.1 防火墙1.2 子网掩码1.3 网关1.4 2 SSH2.1 SSH2.2 SSH12.3 SSH2 3 Telnet4 Telnet/SSL5 NFS6 TFTP7 FTP8 SFTP9 HTTP10 HTTPS11 NAT12 加密 1 网络通讯 1.1 防火墙 所谓“防火墙”&#xff0c;是指一种将内部网和公众访问网(如Internet)分开的方法&…
阅读更多...
C# OpenCvSharp 环形文字处理 直角坐标与极坐标转换

C# OpenCvSharp 环形文字处理 直角坐标与极坐标转换

效果1 效果2 项目 代码 using OpenCvSharp; using System; using System.Drawing; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_Demo {public partial class frmMain : Form{public frmMain(){InitializeComponent();}string fileFilter "*.*…
阅读更多...
2020年五一杯数学建模A题煤炭价格预测问题解题全过程文档及程序

2020年五一杯数学建模A题煤炭价格预测问题解题全过程文档及程序

2020年五一杯数学建模 A题 煤炭价格预测问题 原题再现 煤炭属于大宗商品&#xff0c;煤炭价格既受国家相关部门的监管&#xff0c;又受国内煤炭市场的影响。除此之外&#xff0c;气候变化、出行方式、能源消耗方式、国际煤炭市场等其他因素也会影响煤炭价格。请完成如下问题。…
阅读更多...
VR虚拟现实：VR技术如何进行原型制作

VR虚拟现实：VR技术如何进行原型制作

VR虚拟现实原型制作 利用VR虚拟现实软件进行原型制作可以用于增强原型测试期间的沉浸感&#xff0c;减少产品设计迭代次数&#xff0c;并将与产品原型制作相关的成本降低40-65%。 VR虚拟现实原型制作市场规模 用于原型制作的虚拟现实 (VR) 市场在 2017 年估计为 2.104 亿美元…
阅读更多...
中文编程软件视频推荐，自学编程电脑推荐，中文编程开发语言工具下载

中文编程软件视频推荐，自学编程电脑推荐，中文编程开发语言工具下载

中文编程软件视频推荐&#xff0c;自学编程电脑推荐&#xff0c;中文编程开发语言工具下载 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件…
阅读更多...
2020年上半年信息安全工程师下午案例题及解析

2020年上半年信息安全工程师下午案例题及解析

2020年因为疫情&#xff0c;计划是上半年考&#xff0c;改为下半年考&#xff0c;但题目是上半年已经出好了的&#xff0c;所以还是第一版教材的内容。 如大家在学习中遇到问题&#xff0c;欢迎通过邮件2976033qq.com留言给作者&#xff0c;以便共同探讨。 试题一&#xff08…
阅读更多...
Java类和对象（续）

Java类和对象（续）

书接上回我们已经学完了对象的初始化&#xff0c;今天的内容更加精彩。 1.封装 面向对象程序的三大特征&#xff1a;封装&#xff0c;继承&#xff0c;多态。 本章主要也是要研究封装&#xff0c;简单来说就是套壳屏蔽细节。 封装的概念&#xff1a; 封装&#xff1a;将数据和…
阅读更多...
世界互联网大会领先科技奖发布 百度知识增强大语言模型关键技术获奖

世界互联网大会领先科技奖发布 百度知识增强大语言模型关键技术获奖

11月8日&#xff0c;2023年世界互联网大会乌镇峰会正式开幕&#xff0c;今年是乌镇峰会举办的第十年&#xff0c;本次峰会的主题为“建设包容、普惠、有韧性的数字世界——携手构建网络空间命运共同体”。 目录 百度知识增强大语言模型关键技术荣获“世界互联网大会领先科技奖”…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发