CSS3边框

1.CSS3圆角边框

border-radius属性：像素或百分比

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6      #first{
 7          border: 1px solid gray;
 8          border-radius: 25px;
 9          height: 20px;
10          width: 100px;
11      }
12 
13     </style>
14 </head>
15 <body>
16 <div id="first"></div>
17 </body>
18 </html>

2.CSS边框阴影

box-shadow属性，添加方向阴影

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6      #first{
 7          border: 1px solid gray;
 8          border-radius: 25px;
 9          height: 20px;
10          width: 100px;
11          box-shadow: 0 5px 5px 0 lightgray;
12      }
13 
14     </style>
15 </head>
16 <body>
17 <div id="first"></div>
18 </body>
19 </html>

3.CSS3边框图片

border-image....不支持？

CSS3背景图片

1.CSS3背景图片尺寸

background-size

2.CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    div{
        border: 1px solid black;
        padding: 35px;
        background-image: url(1.png);
        background-repeat: no-repeat;
        background-position: left;
    }
    #div1{
       background-origin: border-box;  
    }
   #div2{
          background-origin: content-box; 
   }
 
    </style>
</head>
<body>
<div id="div1">
<p>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</p>
</div>
<div id="div2">
<p>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</p>
</div>
</body>
</html>

3.CSS3多重背景

background-image: url(1.png),url(d:2/5.jpg);

 

 

CSS3文本效果

1文本阴影  text-shadow

能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6     #div1{
 7         text-shadow: 10px 10px 3px lightgray;
 8     }
 9     </style>
10 </head>
11 <body>
12 <div id="div1">
13 自认惊叹的桥段终沦为老生常谈
14 
15 </div>
16 </body>
17 </html>

2.CSS3自动换行

word-wrap::break-word

1  #div1{
2         text-shadow: 10px 10px 3px lightgray;
3         border: 1px outset gray;
4         width: 150px;
5         word-wrap: break-word;
6     }

 

css3字体

CSS3 @font-face 规则

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6     @font-face{
 7         font-family: my;
 8         src:url('Sansation_Light.ttf');
 9     }
10     #div1{
11         text-shadow: 10px 10px 3px lightgray;
12         border: 1px outset gray;
13         width: 150px;
14         word-wrap: break-word;
15         font-family: my;
16     }
17     </style>
18 </head>
19 <body>
20 <div id="div1">
21 thisisaveryveryveryveryveryveryveryverylongword
22 </div>
23 </body>
24 </html>

 

 

CSS3 2D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

相对正常位置，-为左上，+为右下

transform: translate(0px,0px);

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

transform: translate(0px,0px) rotate(90deg);

scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

transform: scale(2,4);

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform: translate(0px,0px)  scale(1,1) skew(30deg,0deg);

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

何苦呢....

 

 

CSS3 3D转换

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

Chrome 和 Safari 需要前缀 -webkit-。

-webkit-transform: rotateX(180deg);

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

backface-visibility:hidden/visible

旋转180度是否可见

 

CSS3过渡

transition属性

要实现这一点，必须规定两项内容：

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长
 1 #div3{
 2         text-shadow: 10px 10px 3px lightgray;
 3         border: 1px outset gray;
 4         width: 150px;
 5         word-wrap: break-word;
 6         font-family: my;
 7         transition: -webkit-transform 2s;
 8        ;
 9 
10     }
11     #div3:hover{
12          -webkit-transform:rotateX(90deg)
13         
14     }

多项改变

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

#div3{
        text-shadow: 10px 10px 3px lightgray;
        border: 1px outset gray;
        width: 150px;
        word-wrap: break-word;
        font-family: my;
        transition: -webkit-transform 2s,width 2s,height 2s,background-color 2s;
       ;

    }
    #div3:hover{
         -webkit-transform:rotateX(360deg);
         width: 200px;
         height: 100px;
         background-color: powderblue;


        
    }

CSS3动画

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

Chrome 和 Safari 需要前缀 -webkit-。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长
 1 #div4{
 2        text-shadow: 10px 10px 3px lightgray;
 3         border: 1px outset gray;
 4         width: 150px;
 5         word-wrap: break-word;
 6         font-family: my;
 7         animation: mysecond 5s;
 8         position: relative;
 9     }
10 @-webkit-keyframes mysecond{
11         0% {
12             background: red;
13             left: 0px;
14             top:0px;
15         }
16         25% {
17             background: gray;
18             left: 200px;
19             top: 0px;
20         }
21         50% {
22             background: blue;
23             left: 200px;
24             top: 200px;
25 
26         }
27         75%{
28             background: purple;
29             left: 0px;
30             top: 200px;
31         }
32         100% {
33             background:yellow;
34             left: 0px;
35             top: 0px;
36 
37         }
38     }
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;/*延迟播放时间*/
animation-iteration-count: infinite;/*无限次播放*/
animation-direction: alternate;/*反向播放*/
animation-play-state: running;
}

CSS3 多列

column-count 属性规定元素应该被分隔的列数：

column-gap 属性规定列之间的间隔：

column-rule 属性设置列之间的宽度、样式和颜色规则。

1 #div5{
2      -webkit-column-count:2;
3      width:400px;
4      text-indent: 2em;
5      -webkit-column-gap:30px;
6      -webkit-column-rule:1px gray outset;
7     }
8     </style>

CSS3用户界面

CSS3 Resizing

在 CSS3，resize 属性规定是否可由用户调整元素尺寸。