2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天
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 keyword来规定。
省略长度的值是 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">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 100px;
width: 100px;
background-color: #ccc;
/*border: 1px solid red;*/
/*box-shadow: 1px 1px 15px rgba(0,0,0,0.7),5px 5px 30px red;*/
box-shadow: inset 1px 1px 15px rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<div></div>
</body>
</html>2.3 border-image 属性
border-image属性是速记属性用于设置
- border-image-source
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
省略的值设置为它们的默认值。
| 值 | 描写叙述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 这个样例演示了怎样创建一个border-image 属性的button。 |
border-image-source
使用方法：
border-image-source:none/image;
用例：
div
{
border-image-source: url(border.png);
}
border-image-slice
使用方法：
border-image-slice: number|%|fill;
用例：
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
注意:
此属性指定顶部。右，底部，左边缘的图像向内偏移，分为九个区域：四个角。四边和中间。图像中间部分将被丢弃（全然透明的处理）。除非填写keyword。假设省略第四个数字/百分比，它和第二个同样的。假设也省略了第三个。它和第一个是同样的。假设也省略了第二个。它和第一个是同样的。
border-image-width
使用方法：
border-image-width: number|%|auto;
用例：
div
{
border-image-source: url(border.png);
border-image-width: 30 30;
}
注意：
border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部。左。两側向内距离。假设第四个值被省略，它和第二个是同样的。假设也省略了第三个，它和第一个是同样的。假设也省略了第二个。它和第一个是同样的。负值是不同意的。
border-image-outset
使用方法：
border-image-outset: length|number;
用例：
div
{
border-image-source: url(border.png);
border-image-outset: 30 30;
}
注意：
border-image-outset用于指定在边框外部绘制 border-image-area 的量。包含上下部和左右部分。
假设第四个值被省略，它和第二个是同样的。
假设也省略了第三个，它和第一个是同样的。
假设也省略了第二个。它和第一个是同样的。
不同意border-im-outset拥有负值。
border-image-repeat
使用方法：
border-image-repeat: stretch|repeat|round|initial|inherit;
用例：
div {
border-image-source: url(border.png);
border-image-repeat: repeat;
}
拓展：
http://www.runoob.com/cssref/css3-pr-border-image-repeat.html
2.4 text-shadow 属性
text-shadow 属性应用于阴影文本。
语法
text-shadow: h-shadow v-shadow blur color;
注意：
text-shadow属性连接一个或很多其它的阴影文本。
属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
| 值 | 描写叙述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。同意负值。 |
| v-shadow | 必需。 垂直阴影的位置。 同意负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。參阅 CSS 颜色值。 |
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>
</body>
</html>3.CSS3的背景
3.1 background-clip属性
background-clip属性指定背景绘制区域。
语法：
background-clip: border-box|padding-box|content-box;
| 值 | 说明 |
|---|---|
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
Lorem ashdiuashdkajbsdkjbaskdjkakd
</div>
</body>
</html>3.2 background-Origin属性
background-Origin属性指定background-position属性应该是相对位置。
注意假设背景图像background-attachment是”固定”，这个属性没有不论什么效果。
background-origin: padding-box|border-box|content-box;
| 值 | 描写叙述 |
|---|---|
| padding-box | 背景图像填充框的相对位置 |
| border-box | 背景图像边界框的相对位置 |
| content-box | 背景图像的相对位置的内容框 |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>3.3 background-size属性
background-size属性指定背景图片大小。
background-size: length|percentage|cover|contain;
| 值 | 描写叙述 |
|---|---|
| auto | 假设不做设置。默认是 auto（自己主动） |
| length | 设置背景图片高度和宽度。 第一个值设置宽度，第二个值设置的高度。 假设仅仅给出一个值。第二个是设置为”atuo(自己主动)” |
| percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。 假设仅仅给出一个值，第二个是设置为”auto(自己主动)” |
| cover | 此时会保持图像的纵横比并将图像缩放成将全然覆盖背景定位区域的最小大小。 |
| contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/try/demo_source/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum。中文又称“乱数假文”。 是指一篇经常使用于排版设计领域的拉丁文文章 ，基本的目的为測试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" height="162"></p>
</body>
</html>4. CSS3 蒙版
会用PS的童鞋一定知道“蒙版”的概念，它能够在图片上实现一定的遮罩效果，当然这里我们不介绍ps里的蒙版，而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。
大家对-webkit-mask这一属性可能不太熟悉。或许有非常多人都是第一次见到。没错。这一属性也是还未被众多浏览器所支持的CSS属性，眼下支持这一属性的仅有 -webkit- 前缀的谷歌及safari浏览器，可是相信在不久的未来这一属性将被其它主流浏览器所支持，以下我们来一睹为快。
| mask | 属性 |
|---|---|
| -webkit-mask-image: | url / gradient 能够使用图片或渐变作为遮罩层 |
| -webkit-mask-repeat: | repeat / repeat-x / repeat-y / no-repeat |
| -webkit-mask-position: | x y; |
| -webkit-mask-clip: | border / padding / content |
| -webkit-mask-origin: | border / padding / content |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> mask遮罩蒙版 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
img{-webkit-mask-image:url('2.png');}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<img src="1.jpg"/>
</body>
</html>也可将css部分更改为渐变的蒙版样式
img{
-webkit-mask-image:-webkit-radial-gradient(50%
50%,rgba(0,0,0,0),rgba(0,0,0,1));
}
渐变蒙版效果展示
.demo2{
width: 300px;
height: 200px;
background: url("img/mask1.jpg") no-repeat;
-webkit-mask: -webkit-gradient(linear,left top,right bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
能够更改蒙版的起始位置（在上面的代码中加入例如以下代码）
-webkit-mask-position:70px 70px;
5. 分栏（拓展）
分栏效果
column
column-count：number； 设置内容分为多少栏显示
column-width：长度单位；设置每一栏的宽度而不设定元素的宽度
column-gap:长度单位;设置多栏之间的间隔距离
column-rule:宽度。颜色;在栏与栏之间添加一条间隔线。相似border.
column-span:all/none;设置是否跨栏显示
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> column分栏效果 </title> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> div{width:1000px;} p{text-indent:2em;padding:0;margin:0;} </style> <link href="" style="text/css" rel="stylesheet"/> </head> <body> <div> <p>和平，使人类处于一种更近似的高度。我们内心的辉煌梦想似乎在这个乏英雄年代显得格格不入，仅仅能在已逝的峥嵘岁月中艳羡那些以前高大伟岸的身影。我们或许非常难企及他们在特定历史环境中创造的丰功伟绩。可是在历史的暮色里。伟人们永不佝偻的却是他们高尚的人格和崇高的理想。</p> <p>理想，是我们为自己确定的人生最大值。仅仅有逐渐接近理想，才干够获得更为充盈的人生。那么，我们最好还是将人生的最大值确定大一些，若伟人一般置心高处。以他们一样高远的视角来关注社会，用他们一样宽阔的胸襟去容纳世界。古人曾云：“虽不能至，心向往之”虽然我们可能终于不能如伟人一般求证出这个过大的最大值，但仅仅要你曾执着以求，你便拥有了不断进取、无限延伸的人生。
仅仅要远处的那面高扬的理想之旗仍在招展，你就不会为取得一点小成就而自我满足、停步不前；也不会因身处逆境便自我消沉、萎畏退缩；更不会因身处恶境而同流合污、自甘堕落。</p> <p>心在高处，不是欲扫天下而不扫一屋的好高骛远。目空一切。
而使一种着眼大处、大度从容、胸襟开阔的人生境界。如此，你就不会变得鼠目寸光、患得患失、蝇营狗苟。
一个拥有伟人般高尚品行和宽阔胸襟的人。或许依旧平凡，但绝不会平凡。就像那灯火，再微弱，仅仅要放于高处，便能最大限度的照射别处。</p> <p>心在高处，不是像尼採那样自诩为太阳似的自我膨胀、自命不凡。
我们并非要去刻意追求非凡。仅仅是想让自己的一生在与理想的无限接近中变得无限充实丰盈。
假设你的理想是成为太阳。那么就像太阳那样默默地燃烧发光。而不是像闪电那样，即使是瞬间的闪烁也要伴以震耳欲聋的雷声。</p> <p>心在高处。不是自不量力、不切实际。我们明晓得自身的能力与理想之间的差距，甚至明确我们的步伐终不可能全然覆盖现实与理想之间的距离。
我们以自身的详细行动一步一步地去接近它，即使不能全然达到那至美的境界。但至少，我们最大限度的接近了它。既然没有人注定成为伟人。那么，也就没有人注定成为平凡的屈膝于现实的现实主义者。那就做一仅仅不知疲倦地飞向太阳的玄鸟吧，虽然总难抵临，也最大限度的接近了辉煌。</p> <p>有志者，事未必成。但。尽吾力。然后无悔。</p> <p>在顺境里不滞留，在逆境里不消沉，在恶境里不堕落，在绝境里不绝望，正是由于自己有一颗永远置于高处的不曾沦落的心。</p> </div> </body> </html>
进行初步的分栏，分为3栏显示
即在css代码中加入例如以下内容：
div{width:1000px; -webkit-column-count:3;}/*此句为新加内容*/
控制栏和栏之间的宽度，创建分隔线，设置分隔线的样式和颜色
-webkit-column-gap:50px;/*控制每两个栏之间距离为50像素*/
-webkit-column-rule:5px dotted #00f;/*加入一条蓝色虚线分隔线，注意像素、样式和颜色之间均使用空格分隔开*/
6. 练习
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #ccc;
/*border-radius: 50px;*/
border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #ccc;
/*border-radius: 50px;*/
border-radius: 50px 0px 50px 50px/50px 0px 50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #ccc;
/*border-radius: 0 0 0 50px/0 0 0 50px;*/
border-radius: 0 0 0 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
***
6.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: #ccc;
/*border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;*/
border-radius: 100px/50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>7.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 0;
border: 100px solid red;
border-left-color: red;
border-right-color: green;
border-top-color: yellow;
border-bottom-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>8.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 0;
border: 100px solid #ccc;
border-right-color: transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>9.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 0;
border: 100px solid #ccc;
border-right-color: transparent;
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
