CSS3选择器、边框、背景、按钮

CSS3选择器

属性选择器:

[target]   选择所有带有target属性元素

[target=-blank]   选择所有使用target="-blank"的元素

[lang|=en]  选择 lang 属性以 en-为开头的所有属性(注意有关-)

a[src^="https"] 选择每一个src属性的值以"https"开头的元素

a[src$=".pdf"]   选择每一个src属性的值以".pdf"结尾的元素

a[src*="runoob"]  选择每一个src属性的值包含子字符串"runoob"的元素

 

CSS3伪类选择器

:nth-child(n)    选择每个p元素是其父级的第n个子元素

:nth-last-child(n)   选择每个p元素的是其父级的第n个子元素,从最后一个子项计数

:nth-of-type(n) 选择每个p元素是其父级的第n个p元素

:nth-last-of-type(n) 选择每个p元素是其父级的第n个p元素 从最后一个开始算

:nth-last-child  指定只有选择每个p元素是其父级的最后一个子级

:nth-first-child  指定只有选择每个p元素是其父级的第一个子级

 

CSS3伪元素选择器

p::first-letter   选择每一个<P>元素的第一个字母或者第一个汉字

p::first-line    选择每一个<P>元素的第一行

 

CSS3颜色

HSL颜色值指定:HSL(色调,饱和度,明度)。

 

CSS3文本效果

(1)文本阴影

text-shadow: 水平阴影 垂直阴影 模糊的距离 以及阴影的颜色;

(2)CSS3边框

CSS3圆角

border-radius: ;

盒阴影:

box-shadow:水平阴影 垂直阴影 模糊的距离 以及阴影的颜色;

(3) 边界图片

border-image:url() 30px 30px round;

(4) 实现三角形

 width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

 

按钮样式:

禁用按钮

cursor:not-allowed;

 

posted @ 2021-11-21 17:41  ..Shmily  阅读(43)  评论(0)    收藏  举报