CSS3边框、颜色、伪选择器
1.CSS3圆角效果:
border-radius:10px;
2.边框阴影:
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
(外部投影)(内部投影)
添加多个阴影:
以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:
.box_shadow{box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:
.box_shadow{box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }
3.边框图片
阴影模糊半径与阴影扩展半径的区别
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
2、X轴偏移量和Y轴偏移量值可以设置为负数
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量为负数:
.boxshadow-outset{width:100px;height:100px;box-shadow:-4px 4px 6px #666; }
4.边框图片
想象一下:一个矩形,有四个边框。如果应用了边框图片,图片该怎么分布呢? 图片会自动被切割分成四等分。用于四个边框。可以理解为它是一个切片工具,会自动把用做边框的图片切割。怎么切割呢?为了方便理解,做了一张特殊的图片,由9个矩形(70*70像素)拼成的一张图(210*210像素),并标注好序号,是不是像传说中的九宫图,如下:
#border-image{background:#F4FFFA;width:210px; height:210px; border:70px solid #ddd;border-image:url(borderimg.png) 70 repeat }
4.颜色之RGBA:
color:rgba(R,G,B,A)将A的值设置为小于1的小数可设置半透明效果。
5.渐变色彩:
Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:
第一个参数省略时,默认为“180deg”,等同于“to bottom”。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
6.文字省略:
text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。
text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。
7.嵌入服务器字体:
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {font-family : 字体名称;src : 字体文件在服务器上的相对或绝对路径; }
8.文本阴影:
text-shadow可以用来设置文本的阴影效果。
text-shadow: X-Offset Y-Offset blur color;
9.设置背景图片的起始位置:
background-origin : border-box | padding-box | content-box;
10.用来将背景图片做适当的裁剪以适应实际需要。
background-clip : border-box | padding-box | content-box | no-clip
11.设置背景图片的大小:
以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明:
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
12. 伪选择器
(1):root
选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。
“:root”选择器等同于<html>元素,简单点说:
:root{background:orange}
html {background:orange;}
(2)
:not
选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:
form {width: 200px;margin: 20px auto; } div {margin-bottom: 20px; } input:not([type="submit"]){border:1px solid red; }
(3).:empty
选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
div {min-height: 30px; }div:empty {border: 1px solid green; }<div>我是墨雪</div> <div></div>
(4).:target
选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。
HTML代码:
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand">content for Brand </div>
CSS代码:
.menuSection{display: none; } :target{/*这里的:target就是指id="brand"的div对象*/display:block; }
(5).“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。
<ol><li><a href="##">Link1</a></li><li><a href="##">Link2</a></li><li><a href="##">link3</a></li> </ol>ol > li:first-child{color: red; }
:nth-last-child(n) 从某父元素的最后一个子元素开始计算,来选择特定的元素。
(6).“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
<div class="wrapper"><div>我是一个块元素,我是.wrapper的第一个子元素</div><p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p><p>我是一个段落元素</p><div>我是一个块元素</div> </div>.wrapper {width: 500px;margin: 20px auto;padding: 10px;border: 1px solid #ccc;color: #fff; } .wrapper > div {background: green; } .wrapper > p {background: blue; } /*我要改变第一个段落的背景为橙色*/ .wrapper > p:first-of-type {background: orange; }
“:nth-of-type(n)
”选择器和“:nth-child(n)
”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。
通过“:nth-of-type(2n)”选择器,将容器“div.wrapper”中偶数段数的背景设置为橙色。
“:last-of-type
”选择器和“:first-of-type
”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素
。
“:nth-last-of-type(n)
”选择器和“:nth-of-type(n)
”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)
”选择器一样。
“:only-child
”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
“:only-of-type”
选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”
是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
(7).在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
“:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。
(8).在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
(9).“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,效果如下图所示:
(10).“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”
(11). “:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。
(12).::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
.clearfix::before, .clearfix::after {content: ".";display: block;height: 0;visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}
转载于:https://www.cnblogs.com/moxuexiaotong/p/6938195.html
CSS3边框、颜色、伪选择器相关推荐
- html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
css3设置边框颜色渐变的方法有哪些 发布时间:2020-09-14 14:51:54 来源:亿速云 阅读:110 作者:小新 css3设置边框颜色渐变的方法有哪些?这个问题可能是我们日常学习或工作经 ...
- css3伪元素::_CSS荧光笔:使用:: selection伪选择器
css3伪元素:: Selecting content on a web page - whether by mouse, touch, gesture or stylus - always prec ...
- html5新增的伪类选择器有,CSS3新增了哪些选择器?(属性、结构伪类、伪元素选择器)...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
- CSS3新增特性:选择器、盒子模型、其他属性
目录 1. CSS3现状 2. 新增选择器 2.1 属性选择 2.2 结构伪类选择 2.3 伪元素选择器(重点) 2.3.1使用场景 3. 盒子模型 4. css3的其他特性 4.1 css3滤镜fi ...
- CSS3新特性——新增选择器,2D/3D转换,动画
CSS3新特性--新增选择器,2D/3D转换,动画 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
- css unchecked,详细介绍CSS中的伪选择器
说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先 我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多, ...
- CSS--使用伪选择器制作箭头图标
// 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式: HTML 1 <section class="main&q ...
- 第95天:CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
- html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
最新文章
- 最常拿来面试的算法与数据结构,不是递归,不是动态规划,看下这
- Hbase数据存储架构
- windows7 下vs2015使用opencv3.30、opencv_contrib库
- (12) ejb学习: JPA的传播属性
- PHP代码优化的细节
- 51单片机—串口通信
- 打造 .NET Core 链接转发服务
- ajax alert表单,jQuery AJAX Post alert()不被调用
- Mysql 5.7安装部署和基本命令
- 如何解决JDK的安装路径中有空格的情况
- DICOM查询/获取信息模型的研究及关系数据库实现
- pymysql executemany()函数
- 如何建立高效的需求管理机制?
- 一般纳税人和小规模纳税人哪个好?哪个更划算?
- 毕业设计-基于汇编语言的at89c52单片机可调数字钟的设计,基于AT89S52单片机数字钟的仿真设计(汇编语言程序)...
- love~LBJ,奥布莱恩神杯3
- 2022-4-23基于单片机的酒驾检测报警系统(MQ3酒精传感器)(风吹摇铃 奔赴星海)
- 图标在XMind中应用
- 怎样用手机照出证件照
- LaTeX 算法代码排版 --latex2e范例总结