CSS3新特性详解(一):CSS3选择器、边框、背景使用细节及案例演示

  CSS3 是 最新的CSS标准,这套新标准提供了更加丰富且实用的规范,如:盒子模型、背景和边框、文字特效、过度、动画等等。在 Web 和小程序开发中采用 CSS3 将会显著的美化我们的应用程序,提升用户体验。从本篇起将陆续讲解CSS3的常用新特性,力求提供更多案例、特效,一来对CSS3做个总结,二来便于今后工作查阅。

1、CSS3实用选择器

序号 选择器 例子 例子描述
1 element1~element2 p~ul 选择前面有 p 元素的每个 ul 元素
2 [attribute^=value] a[src^=“https”] 选择其 src 属性值以 “https” 开头的每个 a 元素
3 [attribute$=value] a[src$=".pdf"] 选择其 src 属性以 “.pdf” 结尾的所有 a 元素
4 [attribute*=value] a[src*=“abc”] 选择其 src 属性中包含 “abc” 子串的每个 a 元素
5 :first-of-type p:first-of-type 选择属于其父元素的首个 p 元素的每个 p 元素
6 :last-of-type p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素
7 :only-of-type p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素
8 :only-child p:only-child 选择属于其父元素的唯一子元素的每个 p 元素
9 :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素
10 :nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数
11 :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 p 元素的每个 p 元素
12 :nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数
13 :last-child p:last-child 选择属于其父元素最后一个子元素每个 p 元素
14 :empty p:empty 选择没有子元素的每个 p 元素(包括文本节点)
15 :enabled input:enabled 选择每个启用的 input 元素
16 :disabled input:disabled 选择每个禁用的 input 元素
17 :checked input:checked 选择每个被选中的 input 元素
18 :not(selector) :not(p ) 选择非 p 元素的每个元素
19 ::selection ::selection 选择被用户选取的元素部分

关于CSS3选择器更详细介绍,比如:nth-last-of-type和nth-last-child的区别,属性选择器的更多应用,nth-of-type(n)元素各种定位情况,请参考:css attribute属性匹配、nth-child元素位置索引匹配等复杂选择器使用总结

2、边框

使用CSS3可以实现圆角边框,边框阴影效果,我们看下css3跟边框相关的2个常用属性:

1)border-radius, 圆角设置

语法: border-radius: 1-4 length|% / 1-4 length|%;

解释: 按顺序设置每个 radius 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

border-radius:20px; 同 border-radius:20px 20px 20px 20px;
border-radius:20px 10px; 同 border-radius:20px 10px 20px 10px;
border-radius:20px 10px 8px; 同 border-radius:20px 10px 8px 10px;

案例:

  • 案例1: border-radius:20px; 同下述css
border-top-left-radius:2em;  		/*上左*/
border-top-right-radius:2em; 		/*上右*/
border-bottom-right-radius:2em;		/*下左*/
border-bottom-left-radius:2em;

上左,上右,下右,下左都是2em; 2em的感念是以2em为半径画个圆,与矩形区域进行正切得到的1/4圆即为圆角,上左即为上左1/4圆。

  • 案例2: border-radius: 2em 1em 4em / 0.5em 3em;同下述css
border-top-left-radius: 2em 0.5em;		/*上左 水平半径2em 垂直半径.5em */
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

border-radius: 值1 ,水平半径、垂直半径都为值1
border-radius: 值1 / 值2,值1为水平半径,值2为垂直半径
在这里插入图片描述

2)box-shadow,边框阴影

语法: box-shadow: h-shadow v-shadow blur spread color inset;

解释: box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。

  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。
  • spread 可选。阴影的尺寸, 正值扩大阴影,负值缩小阴影。
  • color 可选。阴影的颜色.
  • inset 可选。将外部阴影 (outset) 改为内部阴影。

案例:

  • 案例1:box-shadow:5px 5px black;
  • 案例2:box-shadow:20px 20px 5px black; 带模糊阴影
  • 案例3:box-shadow:20px 20px 5px 5px black; 带模糊阴影,阴影尺寸增加5px
  • 案例4:box-shadow:10px 10px 5px 10px pink inset; 内阴影,可实现立体按钮效果
  • 案例5:box-shadow: 3px 3px red, -1em 0 0.4em olive; 2个阴影
    在这里插入图片描述

3、背景

CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制,具体属性如下:

  • background-size:背景图片缩放
  • background-origin:背景图片定位区域
  • background-clip:规定背景的绘制区域
1)background-size:背景图片缩放

语法: background-size: length|percentage|cover|contain;
解释: 规定背景图像的尺寸,缩放、拉伸等,具体参数说明如下。

  • length:设置背景图像的高度和宽度,第一个值表示宽度,第二个值表示高度,如果只有1个值,第二个值为auto
  • percentage:以父元素的百分比来设置背景图像的宽度和高度,第一个值宽度,第二个值高度,如果只有1个值,第二个值为auto
  • cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
  • 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

案例,容器宽120px 高80px,背景图原图大小为400*270:

  • background-size:120px 80px; // 背景图缩放到宽120px,高80px
  • background-size:100px; // 背景图缩放到宽100px,高自适应67.5:270*100/400
  • background-size:50%; // 背景图缩放到宽60px=120 * 0.5,高40.5:270*60/400
  • background-size:cover; // 图片完全填满最合适尺寸, 宽度|高度有可能发生裁剪,

假设图片宽度取120,则高度 = 120/400 * 270 = 81 >= 80,可以完全填满
假设图片高度取80,则宽度 = 80/270 * 400 = 118.5 < 120,不能完全填满
所以本例,填充图片的宽度120,高度81,高度被裁剪了1px

  • background-size:contain; // 图片不发生裁剪的情况下,尽可能填满的最合适尺寸,宽度或高度有可能填充不满

假设图片宽度取120,则高度 = 120/400 * 270 = 81 >= 80,高度发生裁剪
假设图片高度取80,则宽度 = 80/270 * 400 = 118.5 < 120,不会发生裁剪
所以本例,填充图片的宽度118.5,高度80,高度完全填满,宽度右侧留白1.5px

在这里插入图片描述

2)background-origin:背景图片填充位置

语法: background-origin: padding-box|border-box|content-box;
解释: background-origin 属性规定 background-position 属性相对于什么位置来定位,具体有3个位置:

  • padding-box 背景图像相对于内边距框来定位
  • border-box 背景图像相对于边框盒来定位
  • content-box 背景图像相对于内容框来定位
    案例:
  • background-origin:padding-box; //背景从边框内边距开始打
  • background-origin:border-box; //背景从边框开始打,注意边框颜色有可能盖住背景图
  • background-origin:content-box; //背景从内容区域开始打
    在这里插入图片描述
3)background-clip:限定背景色的绘制区域

语法: background-clip: border-box|padding-box|content-box;
解释: background-clip 属性规定背景色绘制区域,类似background-origin,具体参数同background-origin。
案例:

  • background-clip:padding-box; // 边框内边距开始填充
  • background-clip:border-box; //背景从边框开始填充,注意边框颜色有可能盖住背景色
  • background-clip:content-box; //背景色从内容区域开始填充
    在这里插入图片描述
展开阅读全文

没有更多推荐了,返回首页