2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天

最新推荐文章于 2020-08-18 21:58:30 发布

VIP文章 MR_LP

最新推荐文章于 2020-08-18 21:58:30 发布

阅读量2.1k

点赞数 1

分类专栏： HTML 学习 H5 学习笔记文章标签： CSS3选择器 CSS3边框 CSS3背景 CSS3蒙版 CSS3mask

本文链接：https://blog.csdn.net/MR_LP/article/details/50907775

版权

CSS3

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

这里写图片描述

今日课程预览

这里写图片描述

1. CSS3 的选择器

1.1 子选择器

例如：设置div下一级的p标签的颜色属性

div>p
{ 
background-color:yellow;
}

1.2 相邻兄弟选择器

解释：可选择紧接在另一元素后的元素，且二者有相同父元素。

如果想属性设置成功：则必须满足几个条件：
1.要有一个h1标签；
2.要有一个p标签；
3.是同级兄弟关系；
4.必须相邻的兄弟关系；

h1 + p {
margin-top:50px;
}

1.3 同级元素通用选择器

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

p~ul
{
background:#ff0000;
}

注意：
element1~element2 选择器 ： element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1

1.4 属性选择器

属性选择器（attribute选择器）(两种)

第一种:
作用：选择带有某种属性的所有元素
格式：element[attribute]
代码如下：

    <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
    <a href="https://www.baidu.com/">不带有target属性</a>
    <a href="https://www.baidu.com/" target=“_blank”>又一个带有target属性的a标签</a>
    <input type="text" name="name1" />
    <input type="text" />
    <input type="text" name="name1" />

    a[target]{
        font-size: 40px;
        color: red;
    }

    input[name]{
        width: 200px;
    }

第二种 :
格式：[attribute=value]
代码如下：

    <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
    <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
    <a href="https://www.baidu.com/">不带有target属性</a>
    <a href="https://www.baidu.com/" target="_parent">又一个带有target属性的a标签</a>
    <input type="text" name="name1" />
    <input type="text" />
    <input type="text" name="name1" />
    <input type="text" name="name2" />

    a[target=_blank]{
        color: pink;
    }
    input[name=name1]{
        border: solid 10px red;
    }

1.5 伪类选择器

类型	举例	说明
:before	p:before	在每个 `<p>` 元素的内容之前插入内容。
:after	p:after	在每个 `<p>` 元素的内容之后插入内容。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 `<p>` 元素的每个 `<p>` 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 `<p>` 元素。

2. CSS边框属性

2.1 border-radius 属性

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。

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

注意:
每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。

如果省略右上角，左上角是相同的。

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

例子 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

2.1.1 练习

见最后

2.2 box-shadow 属性

box-shadow属性可以设置一个或多个下拉阴影的框。

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

注意：

boxShadow 属性把一个或多个下拉阴影添加到框上。

该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
    }
    </style>
    </head>
    <body>

    <div></div>

    </body>
    </html>

内阴影效果展示

    <!DOCTYPE html>
    <html lang="en">

最低0.47元/天解锁文章

MR_LP

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天

CSS3今日课程预览 1. CSS3 的选择器1.1 子选择器例如：设置div下一级的p标签的颜色属性div>p{ background-color:yellow;}1.2 相邻兄弟选择器解释：可选择紧接在另一元素后的元素，且二者有相同父元素。如果想属性设置成功：则必须满足几个条件：1.要有一个h1标签；2.要有一个p标签；3.是同级兄弟关系；4.必须相邻的兄弟关系；h1 + p
复制链接

扫一扫