CSS3

假设您认为这篇文章还不错。能够去H5专题介绍中查看很多其它相关文章。

今日课程预览



1. CSS3 的选择器

1.1 子选择器

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

  1. div>p
  2. {
  3. background-color:yellow;
  4. }

1.2 相邻兄弟选择器

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

  1. 假设想属性设置成功：则必须满足几个条件：
  2. 1.要有一个h1标签；
  3. 2.要有一个p标签。
  4. 3.是同级兄弟关系；
  5. 4.必须相邻的兄弟关系。
  7. h1 + p {
  8. margin-top:50px;
  9. }

1.3 同级元素通用选择器

为全部同样的父元素中位于 p 元素之后的全部 ul 元素设置背景：

  1. p~ul
  2. {
  3. background:#ff0000;
  4. }
  6. 注意：
  7. element1~element2 选择器 ： element1 之后出现的全部 element2。
  8. 两种元素必须拥有同样的父元素，可是 element2 不必直接紧随 element1

1.4 属性选择器

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

第一种:

作用：选择带有某种属性的全部元素

格式：element[attribute]

代码例如以下：

  1.     <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
  2.     <a href="https://www.baidu.com/">不带有target属性</a>
  3.     <a href="https://www.baidu.com/" target=“_blank”>又一个带有target属性的a标签</a>
  4.     <input type="text" name="name1" />
  5.     <input type="text" />
  6.     <input type="text" name="name1" />
  8.     a[target]{
  9.         font-size: 40px;
  10.         color: red;
  11.     }
  13.     input[name]{
  14.         width: 200px;
  15.     }

另外一种 :

格式：[attribute=value]

代码例如以下：

  1.     <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
  2.     <a href="https://www.baidu.com/" target="_blank">带有target属性</a>
  3.     <a href="https://www.baidu.com/">不带有target属性</a>
  4.     <a href="https://www.baidu.com/" target="_parent">又一个带有target属性的a标签</a>
  5.     <input type="text" name="name1" />
  6.     <input type="text" />
  7.     <input type="text" name="name1" />
  8.     <input type="text" name="name2" />
  10.     a[target=_blank]{
  11.         color: pink;
  12.     }
  13.     input[name=name1]{
  14.         border: solid 10px red;
  15.     }

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

  1. border-radius:2em;
  3. is equivalent to:
  5. border-top-left-radius:2em;
  6. border-top-right-radius:2em;
  7. border-bottom-right-radius:2em;
  8. border-bottom-left-radius:2em;

样例 2

  1. border-radius: 2em 1em 4em / 0.5em 3em;
  3. is equivalent to:
  5. border-top-left-radius: 2em 0.5em;
  6. border-top-right-radius: 1em 3em;
  7. border-bottom-right-radius: 4em 0.5em;
  8. border-bottom-left-radius: 1em 3em;

2.1.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 可选。

从外层的阴影（開始时）改变阴影内側阴影

 
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <style>
  5.     div
  6.     {
  7.     width:300px;
  8.     height:100px;
  9.     background-color:yellow;
  10.     box-shadow: 10px 10px 5px #888888;
  11.     }
  12.     </style>
  13.     </head>
  14.     <body>
  16.     <div></div>
  18.     </body>
  19.     </html>

内阴影效果展示

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <style type="text/css">
  7.         div{
  8.             height: 100px;
  9.             width: 100px;
  10.             background-color: #ccc;
  11.             /*border: 1px solid red;*/
  12.             /*box-shadow: 1px 1px 15px rgba(0,0,0,0.7),5px 5px 30px red;*/
  13.             box-shadow: inset 1px 1px 15px rgba(0,0,0,0.7);
  14.         }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div></div>
  19.     </body>
  20.     </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

使用方法：

  1. border-image-source:none/image;

用例：

  1. div
  2. {
  3. border-image-source: url(border.png);
  4. }

border-image-slice

使用方法：

  1. border-image-slice: number|%|fill;

用例：

  1. div
  2. {
  3. border-image-source: url(border.png);
  4. border-image-slice: 50% 50%;
  5. }

注意:

此属性指定顶部。右，底部，左边缘的图像向内偏移，分为九个区域：四个角。四边和中间。图像中间部分将被丢弃（全然透明的处理）。除非填写keyword。假设省略第四个数字/百分比，它和第二个同样的。假设也省略了第三个。它和第一个是同样的。假设也省略了第二个。它和第一个是同样的。

border-image-width

使用方法：

  1. border-image-width: number|%|auto;

用例：

  1. div
  2. {
  3. border-image-source: url(border.png);
  4. border-image-width: 30 30;
  5. }

注意：

border-image -width的4个值指定用于把border图像区域分为九个部分。他们代表上，右，底部。左。两側向内距离。假设第四个值被省略，它和第二个是同样的。假设也省略了第三个，它和第一个是同样的。假设也省略了第二个。它和第一个是同样的。负值是不同意的。

border-image-outset

使用方法：

  1. border-image-outset: length|number;

用例：

  1. div
  2. {
  3. border-image-source: url(border.png);
  4. border-image-outset: 30 30;
  5. }

注意：

border-image-outset用于指定在边框外部绘制 border-image-area 的量。包含上下部和左右部分。

假设第四个值被省略，它和第二个是同样的。

假设也省略了第三个，它和第一个是同样的。

假设也省略了第二个。它和第一个是同样的。

不同意border-im-outset拥有负值。

border-image-repeat

使用方法：

  1. border-image-repeat: stretch|repeat|round|initial|inherit;

用例：

  1. div {
  2. border-image-source: url(border.png);
  3. border-image-repeat: repeat;
  4. }

拓展：

  1. 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 颜色值。 
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <style>
  5.     h1 {text-shadow:2px 2px #FF0000;}
  6.     </style>
  7.     </head>
  8.     <body>
  10.     <h1>Text-shadow effect</h1>
  12.     <p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p>
  14.     </body>
  15.     </html>

3.CSS3的背景

3.1 background-clip属性

background-clip属性指定背景绘制区域。

语法：

  1. background-clip: border-box|padding-box|content-box;
值 说明
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。 
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <style>
  5.     div
  6.     {
  7.     width:300px;
  8.     height:300px;
  9.     padding:50px;
  10.     background-color:yellow;
  11.     background-clip:content-box;
  12.     border:2px solid #92b901;
  13.     }
  14.     </style>
  15.     </head>
  16.     <body>
  18.     <div>
  19.     Lorem ashdiuashdkajbsdkjbaskdjkakd
  20.     </div>
  22.     </body>
  23.     </html>

3.2 background-Origin属性

background-Origin属性指定background-position属性应该是相对位置。

注意假设背景图像background-attachment是”固定”，这个属性没有不论什么效果。

  1. background-origin: padding-box|border-box|content-box;
值 描写叙述
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框 
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <style>
  5.     div
  6.     {
  7.     border:1px solid black;
  8.     padding:35px;
  9.     background-image:url('smiley.gif');
  10.     background-repeat:no-repeat;
  11.     background-position:left;
  12.     }
  13.     #div1
  14.     {
  15.     background-origin:border-box;
  16.     }
  17.     #div2
  18.     {
  19.     background-origin:content-box;
  20.     }
  21.     </style>
  22.     </head>
  23.     <body>
  25.     <p>background-origin:border-box:</p>
  26.     <div id="div1">
  27.     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.
  28.     </div>
  30.     <p>background-origin:content-box:</p>
  31.     <div id="div2">
  32.     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.
  33.     </div>
  35.     </body>
  36.     </html>

3.3 background-size属性

background-size属性指定背景图片大小。

  1. background-size: length|percentage|cover|contain;
值 描写叙述
auto 假设不做设置。默认是 auto（自己主动）
length 设置背景图片高度和宽度。

第一个值设置宽度，第二个值设置的高度。

假设仅仅给出一个值。第二个是设置为”atuo(自己主动)”
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。

假设仅仅给出一个值，第二个是设置为”auto(自己主动)”
cover 此时会保持图像的纵横比并将图像缩放成将全然覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 
  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <style>
  5.     body
  6.     {
  7.     background:url(/try/demo_source/img_flwr.gif);
  8.     background-size:80px 60px;
  9.     background-repeat:no-repeat;
  10.     padding-top:40px;
  11.     }
  12.     </style>
  13.     </head>
  14.     <body>
  15.     <p>
  16.     Lorem ipsum。中文又称“乱数假文”。 是指一篇经常使用于排版设计领域的拉丁文文章 ，基本的目的为測试文章或文字在不同字型、版型下看起来的效果。
  17.     </p>
  19.     <p>原始图片: <img src="/try/demo_source/img_flwr.gif"  alt="Flowers" width="224" height="162"></p>
  21.     </body>
  22.     </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 
  1.     <!DOCTYPE HTML>
  2.     <html>
  3.      <head>
  4.       <meta charset="utf-8">
  5.       <title> mask遮罩蒙版 </title>
  6.       <meta name="Keywords" content="">
  7.       <meta name="Description" content="">
  8.       <style type="text/css">
  9.      img{-webkit-mask-image:url('2.png');}
  10.       </style>
  11.       <link href="" style="text/css" rel="stylesheet"/>
  12.      </head>
  13.      <body>
  14.       <img src="1.jpg"/>
  15.      </body>
  16.     </html>

也可将css部分更改为渐变的蒙版样式

  1. img{
  2. -webkit-mask-image:-webkit-radial-gradient(50%
  3. 50%,rgba(0,0,0,0),rgba(0,0,0,1));
  4. }

渐变蒙版效果展示

  1. .demo2{
  2.     width: 300px;
  3.     height: 200px;
  4.     background: url("img/mask1.jpg") no-repeat;
  5.     -webkit-mask: -webkit-gradient(linear,left top,right bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
  6. }

能够更改蒙版的起始位置（在上面的代码中加入例如以下代码）

  1. -webkit-mask-position:70px 70px;

5. 分栏（拓展）

分栏效果

column

column-count：number； 设置内容分为多少栏显示

column-width：长度单位；设置每一栏的宽度而不设定元素的宽度

column-gap:长度单位;设置多栏之间的间隔距离

column-rule:宽度。颜色;在栏与栏之间添加一条间隔线。相似border.

column-span:all/none;设置是否跨栏显示

  1. <!DOCTYPE HTML>
  2. <html>
  3.  <head>
  4.   <meta charset="utf-8">
  5.   <title> column分栏效果 </title>
  6.   <meta name="Keywords" content="">
  7.   <meta name="Description" content="">
  8.   <style type="text/css">
  9.  div{width:1000px;}
  10.  p{text-indent:2em;padding:0;margin:0;}
  11.   </style>
  12.   <link href="" style="text/css" rel="stylesheet"/>
  13.  </head>
  14.  <body>
  15.   <div>
  16.   <p>和平，使人类处于一种更近似的高度。
  18. 我们内心的辉煌梦想似乎在这个乏英雄年代显得格格不入，仅仅能在已逝的峥嵘岁月中艳羡那些以前高大伟岸的身影。我们或许非常难企及他们在特定历史环境中创造的丰功伟绩。可是在历史的暮色里。伟人们永不佝偻的却是他们高尚的人格和崇高的理想。</p>
  19.   <p>理想，是我们为自己确定的人生最大值。仅仅有逐渐接近理想，才干够获得更为充盈的人生。那么，我们最好还是将人生的最大值确定大一些，若伟人一般置心高处。以他们一样高远的视角来关注社会，用他们一样宽阔的胸襟去容纳世界。古人曾云：“虽不能至，心向往之”虽然我们可能终于不能如伟人一般求证出这个过大的最大值，但仅仅要你曾执着以求，你便拥有了不断进取、无限延伸的人生。
  21. 仅仅要远处的那面高扬的理想之旗仍在招展，你就不会为取得一点小成就而自我满足、停步不前；也不会因身处逆境便自我消沉、萎畏退缩；更不会因身处恶境而同流合污、自甘堕落。</p>
  22. <p>心在高处，不是欲扫天下而不扫一屋的好高骛远。目空一切。
  24. 而使一种着眼大处、大度从容、胸襟开阔的人生境界。如此，你就不会变得鼠目寸光、患得患失、蝇营狗苟。
  26. 一个拥有伟人般高尚品行和宽阔胸襟的人。或许依旧平凡，但绝不会平凡。就像那灯火，再微弱，仅仅要放于高处，便能最大限度的照射别处。</p>
  27. <p>心在高处，不是像尼採那样自诩为太阳似的自我膨胀、自命不凡。
  29. 我们并非要去刻意追求非凡。仅仅是想让自己的一生在与理想的无限接近中变得无限充实丰盈。
  31. 假设你的理想是成为太阳。那么就像太阳那样默默地燃烧发光。而不是像闪电那样，即使是瞬间的闪烁也要伴以震耳欲聋的雷声。</p>
  32. <p>心在高处。不是自不量力、不切实际。我们明晓得自身的能力与理想之间的差距，甚至明确我们的步伐终不可能全然覆盖现实与理想之间的距离。
  34. 我们以自身的详细行动一步一步地去接近它，即使不能全然达到那至美的境界。但至少，我们最大限度的接近了它。既然没有人注定成为伟人。那么，也就没有人注定成为平凡的屈膝于现实的现实主义者。那就做一仅仅不知疲倦地飞向太阳的玄鸟吧，虽然总难抵临，也最大限度的接近了辉煌。</p>
  35. <p>有志者，事未必成。但。尽吾力。然后无悔。</p>
  36. <p>在顺境里不滞留，在逆境里不消沉，在恶境里不堕落，在绝境里不绝望，正是由于自己有一颗永远置于高处的不曾沦落的心。</p>
  37. </div>
  38.  </body>
  39. </html>

进行初步的分栏，分为3栏显示

即在css代码中加入例如以下内容：

  1. div{width:1000px; -webkit-column-count:3;}/*此句为新加内容*/

控制栏和栏之间的宽度，创建分隔线，设置分隔线的样式和颜色

  1. -webkit-column-gap:50px;/*控制每两个栏之间距离为50像素*/
  2. -webkit-column-rule:5px dotted #00f;/*加入一条蓝色虚线分隔线，注意像素、样式和颜色之间均使用空格分隔开*/

6. 练习

1. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: #ccc;
  11.         border-radius: 20px;
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17. </body>
  18. </html>

2. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: #ccc;
  11.         border-radius: 50px;
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17. </body>
  18. </html>

3. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: #ccc;
  11.         /*border-radius: 50px;*/
  12.         border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
  13.     }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div></div>
  18. </body>
  19. </html>

4. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: #ccc;
  11.         /*border-radius: 50px;*/
  12.         border-radius: 50px 0px 50px 50px/50px 0px 50px 50px;
  13.     }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div></div>
  18. </body>
  19. </html>

5. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 100px;
  9.         height: 100px;
  10.         background-color: #ccc;
  11.         /*border-radius: 0 0 0 50px/0 0 0 50px;*/
  12.         border-radius: 0 0 0 50px;
  13.     }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div></div>
  18. </body>
  19. </html>
  20. ***
  21. 6.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 200px;
  9.         height: 100px;
  10.         background-color: #ccc;
  11.         /*border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;*/
  12.         border-radius: 100px/50px;
  13.     }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div></div>
  18. </body>
  19. </html>

7. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 0;
  9.         border: 100px solid red;
  10.         border-left-color: red;
  11.         border-right-color: green;
  12.         border-top-color: yellow;
  13.         border-bottom-color: blue;
  14.     }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div></div>
  19. </body>
  20. </html>

8. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 0;
  9.         border: 100px solid #ccc;
  10.         border-right-color: transparent;
  11.     }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div></div>
  16. </body>
  17. </html>

9. 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.     div{
  8.         width: 0;
  9.         border: 100px solid #ccc;
  10.         border-right-color: transparent;
  11.         border-radius: 100px;
  12.     }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div></div>
  17. </body>
  18. </html>

2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天的更多相关文章

  1. ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第七章_使用ArcGIS进行空间分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 使用ArcGIS进行空间分析 1.1 GIS分析基础 G ...

  2. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

  3. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

  4. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  5. Demo02_对结构体进行文件读写_张仕传_作业_

    #include <iostream> using namespace std; #define StructArrarySize 5 // 老师数量 #define StudentNum ...

  6. CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站

    CLOSE-UP FORMALWEAR_意大利进口_2015秋冬_男装发布会_西装图片系列_男装西装设计资料_WeArTrends时尚资讯网_国内最专业的服装设计资讯网站 CLOSE-UP FORMA ...

  7. 金洪林：红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网

    金洪林:红邦创衣止于至善_品牌-生活时尚_品牌_YOKA时尚网 金洪林:红邦创衣止于至善

  8. 联系我们_你我想法_【有男度】UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站

    联系我们_你我想法_[有男度]UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站 联系我们 2012-02-17   国内北京公司总部  邮编 ...

  9. 联系我们_站内信息_站内资讯_网上定制衬衫|衬衫定制|衬衫定做-ChenShanLe衬衫乐

    联系我们_站内信息_站内资讯_网上定制衬衫|衬衫定制|衬衫定做-ChenShanLe衬衫乐 衬衫乐定制网是国内领先的成衣定制机构,专业从事衬衫网络在线定制.高级定制服装的价格不菲,而衬衫乐运用了&qu ...

随机推荐

  1. JavaSE-20 IO序列化

    学习要点 定义 IO如何序列化 序列化 序列化:是将对象的状态存储到特定存储介质中的过程. 反序列化:从特定存储介质中的数据重新构建对象的过程. 实现了java.io.Serializable接口的类 ...

  2. 如何手写一款KOA的中间件来实现断点续传

    本文实现的断点续传只是我对断点续传的一个理解.其中有很多不完善的地方,仅仅是记录了一个我对断点续传一个实现过程.大家应该也会发现我用的都是一些H5的api,老得浏览器不会支持,以及我并未将跨域考虑入内 ...

  3. js+flash(as3)实现复制文字内容到剪切板实例

    /* SWFObject v2.2 swfobject.js */ var swfobject=function(){var D="undefined",r="objec ...

  4. 对拍 bat命令快速模板

    对拍.bat @echo off :loop maker.exe > in.in wq.exe < in.in > out.out std.exe < in.in >st ...

  5. Go：struct

    一.使用方式 方式3和方式4返回的是:结构体指针,编译器底层对 p.Name 做了转化 *(p).Name,方便程序员使用. type Person struct { Name string Age ...

  6. 【Mysql数据库】学习笔记

    一.数据库的创建 create database database_name  DEFAULT CHARACTER SET utf8; //创建一个数据库 drop database database ...

  7. drupal8 用户指南

    一句话概括 - 官方文档 概念- Drupal是个内容管理系统哦 那么,什么是内容管理系统? 就是用户自己编辑自己的网站内容的一个系统. 那么,什么是Drupal呢? Drupal是一个通过模块和主题 ...

  8. 深入React技术栈之setState详解

    抛出问题 class Example extends Component { contructor () { super() this.state = { value: 0, index: 0 } } ...

  9. 13Spring通过注解配置Bean(1)

    配置Bean的形式:基于XML文件的方式:基于注解的方式(基于注解配置Bean:基于注解来装配Bean的属性) 下面介绍基于注解的方式来配置Bean. ——组件扫描(component scannin ...

  10. PHP：现有图片验证码类

    文章来源:http://www.cnblogs.com/hello-tl/p/7593022.html <?php class TL_Captcha_img{ private $image; / ...