CSS3的各种应用（一）

---恢复内容开始---

CSS可以控制网页的布局和样式，CSS3是最新的CSS标准。

一、通过CSS3，可以可以创建圆角边框，给矩形添加阴影，将边框替换成图形。且不需要使用设计软件，如PS等。

CSS3边框boder-radius box-shadow boder-image。

boder-radius属性可以用来创建圆角。

可以设置具体数值或者百分数。

#div1{width: 200px;
          height: 100px;
      border:1px solid blue;
      border-radius: /*10px*/ 10%;            
      }

box-shadow属性可以给边框增加阴影。

属性数值对应:x轴偏移量 + y轴偏移量 + 阴影模糊半径(阴影颜色的模糊程度)+ 阴影扩展半径+ 阴影颜色 + 投影方式

         div{
                box-shadow: 10px 10px 5px #888888;
                }

boder-image可以使用图片来制作边框。

 div {
               border-image:url(border.png) 30 30 round;}

二，CSS3背景属性。

CSS3的背景属性为background-size background-origin.

在CSS3之前，背景的设置由图片的实际尺寸决定的。在CSS3中，可以规定背景图片尺寸，来应用于不同的环境。

 div {
           background:url(bg_flower.gif);
           background-size:63px 100px;
           background-repeat:no-repeat;/*不许平铺*/
                  }

若将background-size设置百分数，可以使背景图占据整个页面。auto默认值，不改变图片的大小。cover填充整个容器

background-origin属性规定图片的定位区域。可使图片放置于content-box padding-box border-box中。

使用background-origin属性，必须设置background-repeat:no-repeat

用background-position来定位图片位置。top right left bottom

多重背景图片与图片用 “，”分格

CSS3中 text-shadow用于文本阴影。

h3{ text-shadow: 5px 5px 5px  #15428B;}

水平阴影、垂直阴影、模糊的距离、阴影颜色。

文字溢出属性

overflow:hidden ; white-space:nowrap 文本超出部分隐藏,强制不换行。

text-overflow: clip修剪文本 ellipsis显示省略号来代替修剪的文本

string，自定义符号来代替修剪的文本。

word-break:有两种属性word-break:break-all 超过一定距离就换行单词截断

word-break:break-word 单词不截断

渐变颜色

background-image:linear-gradient(to bottom,blue,red）渐变方向--开始的颜色blue，结束的颜色red

---恢复内容结束---

CSS3的各种应用（一）

猜你喜欢