首页 > 资讯 > HTML/CSS > 正文

CSS3选择器、CSS3圆角使用介绍

17-10-17 来源：[db:作者]

收藏我要投稿

CSS3选择器

1.1 属性选择器

E[attr^=’value’]指定属性名，找以value开头的属性值。

E[attr$=’value’]指定属性名，找以value结尾的属性值。

E[attr*=’value’]指定属性名，找包含value的属性值。

1.2 伪类选择器

1.2.1 和用户界面相关的

E:enabled{}：元素被激活的时候触发，比如输入框获取焦点
E:disabled{}：元素被禁用的时候触发，比如输入框不可获取焦点
E:checked{}：当元素被选中的时候触发，比如radio或checkbox元素的选中

E::selection{}：选中的时候触发，比如一段文字被选中的时候，给选中的文字设置字体。

注意：::selection 选择器匹配被用户选取的选取是部分。
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

1.2.2 结构性伪类

:root：在HTML文档中，就是HTML元素
body的高度到底是啥？？当我们没有对HTML元素设置背景颜色的时候，HTML会自动 读取 body的背景颜色。
E:empty：当一个元素没有内容（没有子元素）的时候触发。
E:nth-child(index){}：所有元素的父元素的第index孩子，孩子的编号第从1开始，同时编号的顺序不管 什么类型的元素  标号一次递增。E:nth-of-type(index){}：所有父元素的第 index孩子，还在编号根据同一类型的元素进行编号，如果一个子元素有多种元素（div、h3、p），那么就有多组编号。
区别：nth-child不管什么标签，都是从1往下编号；nth-of-type会把每一个标签分别编号。
E: first-of-type: == E:nth-of-type(1){}
E :last-of-type：== E:nth-of-type(最后一个){}

CSS3圆角

优点：①减少网站的维护量；②提高网站的性能，减少图片的http请求，载入网页速度加快

<style>  
    .div1{  
        width: 200px;  
        height: 200px;  
        border: 2px solid greenyellow;  
        border-radius: 25px;  
    }  
</style>

border-radius：含义“边框半径”，指定一个值，就是能同时设置四个角的半径（默认值为0，但不可以是负数）

（2）指定每一个角（圆角参数）

<style>  
        .div1{  
            width: 200px;  
            height: 180px;  
            border: 2px solid greenyellow;  
            border-radius: 25px;  
        }  
        .div2{  
            width: 200px;  
            height: 180px;  
            margin-top: 10px;  
            border: 2px solid greenyellow;  
            border-radius: 25px 5px;  
        }  
        .div3{  
            width: 200px;  
            height: 180px;  
            margin-top: 10px;  
            border: 2px solid greenyellow;  
            border-radius: 25px 5px 35px;  
        }  
        .div4{  
            width: 200px;  
            height: 180px;  
            margin-top: 10px;  
            border: 2px solid greenyellow;  
            border-radius: 25px 5px 35px 50px;  
        }  
    </style>  
</head>  
<body>  
    <div class="div1">这只一个值，四个角都是一样的弧度</div>  
    <div class="div2">两个值，第一个值左上角和右下角，第二个值右上角和左下角</div>  
    <div class="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值是右下角</div>  
    <div class="div4">四个值，给每一个角都设置一个值，分别代表的是左上角、右上角、右下角和左下角</div>  
</body>

这里有需要注意的点：

属性的两个长度，第一个是水平半径，第二个是垂直半径，如果第二个值省略，则它是以第一个值复制（如果任一长度为0，没有弧度，直接是方的）。

<style>  
    .div1{  
        width: 200px;  
        height: 180px;  
        border: 2px solid greenyellow;  
        border-top-left-radius: 25px;  
        border-top-right-radius: 20px;  
    }  
</style>

使用border-radius属性可以给任何元素制作圆角；它有四个属性，分别是设置四个角的圆角，border-radius只是一个缩写，代表的是只要设置一个值就相当于设置了四个角的圆角，同时也可以指定生成圆角。

border-top-left-radius：定义了左上角的弧度；
border-top-right-radius：定义了右上角的弧度；
border-bottom-right-radius：定义了右下角的弧度；
border- bottom -left-radius：定义了左下角的弧度；
这四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

点击复制链接与好友分享!回本站首页