继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

学习css3新特性,简单有用的案例

红书包
关注TA
已关注
手记 9
粉丝 7
获赞 72

1.@font-size
客户端写法

<p style="font-family:'宋体';">这是客户端字体写法</p>

服务器端写法
多个值时用逗号隔开

@font-size{font-family: BorderWeb;src:url(BORDERW0.eot);}
        .p{font-size: 12px;font-family:"BorderWeb",'黑体','宋体'; }
<p class="p">能是一份完整的文档,也可能是一个chunk,</p>

2.word-wrap属性

 <div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
加入了“word-wrap: break-word”,设置或检索当前行超过指定容器的边界时是否断开转行,文字此时已被断开。
 </div>

word-spacing 字与字之间的间距

word-spacing:30px;

3.text-overflow 对象内文本溢出时显示省略标记

.ellipsis{overflow: hidden;  text-overflow:ellipsis; white-space: nowrap;width:200px;}
<div class="ellipsis">当对象内文本溢出时显示省略标记</div>

4.text-decoration 文字渲染
white-space 属性指定元素内的空白怎样处理。

.div{overflow: hidden;  
            text-overflow:ellipsis;  /*当对象文本溢出时显示省略号*/
            white-space: nowrap;  /*文本不会换行,直到遇到<br>*/
            -webkit-text-fill-color:black; /*文字内部填充颜色*/
            -webkit-text-stroke-color:red; /*文字边界填充颜色*/
            -webkit-text-stroke-width:1px; /*文字边界宽度*/
            font-size: 30px;
                width:300px;

            }
<div class="div">

        浏览器接收到html代码,可能是一份完整的文档,也可能是一个chunk,即开始解析。解析过程是先构建dom树,再根据dom树构建渲染树,渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据html代码自上而下构建dom树,当遇到script文件加载/执行会阻塞后面dom树的构建
</div>

5.多列布局

.div3{
            -webkit-column-count:3;/*表示布局几列*/
            -webkit-column-rule:1px solid #ccc;/*表示列与列之间的间隔条的样式*/
            -webkit-column-rap:10px;/*表示列与列之间的间隔*/
        }
<div class="div3">
        浏览器接收到html代码,可能是一份完整的文档,也可能是一个chunk,即开始解析。解析过程是先构建dom树,再根据dom树构建渲染树,渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据
        <p>html代码自上而下构建dom树,当遇到script文件加载/执行会阻塞后面dom树的构建(JavaScript可能会改变dom树),而遇到css文件则会阻塞渲染树的构建,即dom树依然继续构建(除非遇到script标签并且css文件依旧未加载完成),</p>但不会渲染绘制到页面上。而无论哪个阻塞,该加载的文件还是会加载,例如html文档中的其他css/js/图片文件。至于javascript被加载后就会被执行,执行的过程也阻塞树的构建。是执行完了才解析其他内容,而不是执行完了才加载其他内容。
</div>

6.border-radius:5px; 圆角
7.text-shadow 文字阴影
text-shadow:x轴方向阴影 y轴方向阴影 阴影模糊程度 阴影模糊颜色
8.box-shadow 边框阴影 (和文字阴影参数一样,x轴和y轴为0的时候,四周都有阴影)

9.reflect 反射效果

.p{
        font-size: 20px;
        font-family:"BorderWeb";
        text-shadow:5px 5px 2px rgba(64,64,64,.5); 
        -webkit-box-reflect:below 10px; /*表示反射在元素下方10px*/
         -webkit-gradient(linear, left top, left bottom, from(transparent), 
      to(rgba(255, 255, 255, 0.51)));  /*反射元素的过渡效果*/
    }
.div{   
        box-shadow: 2px 2px 2px rgba(64,64,64,.3);
        width:200px;
        height:200px;
        border-radius:5px;
     }
<div class="div">
    <p class="p">能是一份完整的文档,也可能是一个chunk,</p>
</div>

10.gradient 渐变效果 linear
gradient

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP