zoukankan      html  css  js  c++  java
  • css3几个新属性

    1、text-shadow  文字阴影

    p{
         text-shadow:2px 2px 10px #000;  
    }

    四个参数,依次:

    a:水平偏移

    b:垂直偏移

    c:阴影程度

    d:阴影颜色

    2、word-break:break-all  

    解释:允许单词换行,是紧接前面内容

    3、word-wrap:break-word

    解释:允许单词换行,是先把单词换一行

    4、white-space:nowrap

    解释:强制文本不换行

    5、text-overflow:ellipsis

    解释:显示省略符号来代表被修剪的文本。

    6、box-sizing:border-box  

    解释:其实就是把border和padding计算在width之内,也就是所说的怪异模式。

    使用时:

    -webkit-box-sizing: 100px; // for ios-safari, android

    -moz-box-sizing:100px; //for ff

    box-sizing:100px; //for other

    7、background-clip

    解释:规定背景的绘制区域  

    值有三个:

    border-box 背景被裁剪到边框盒。(默认属性值)

    padding-box 背景被裁剪到内边距框。

    content-box 背景被裁剪到内容框。

    举个栗子,比如border-box和padding-box的区别

    border-box:

    .box{
        width:100px;
        height:100px;
        border:10px dashed red;
        background: greenyellow;
        background-clip: border-box;
    }

    效果:

    padding-box:

    .box{
        width:100px;
        height:100px;
        border:10px dashed red;
        background: greenyellow;
        background-clip: padding-box;
    }

    效果:

    8、background-origin

    解释:background-origin 属性规定 background-position 属性相对于什么位置来定位。

    值有三个:

    border-box 背景图像相对于内边距框来定位。(默认属性值)

    padding-box 背景图像相对于边框盒来定位。

    content-box 背景图像相对于内容框来定位。

    举个栗子,比如padding-box和content-box的区别

    padding-box:

    .box{
        width:250px;
        height:250px;
        border:10px dashed red;
        background:greenyellow url(123.jpg) no-repeat;
        background-origin:padding-box;
    }

    效果:

    content-box:

    .box{
        width:210px;
        height:210px;
        padding:20px;
        border:10px dashed red;
        background:greenyellow url(123.jpg) no-repeat;
        background-origin:content-box;
    }

    效果:

    9、background-size:cover

    解释:规定背景图像的尺寸,cover规定把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

    栗子:

    .box{
        width:450px;
        height:300px;
        border: 1px solid #000;
        background:greenyellow url(123.jpg) no-repeat;
                
    }

    这里盒子大小是450*300,而背景图片大小为300*200,自然没法填满,效果:

    接下来添加属性:background-size:cover

    .box{
        width:450px;
        height:300px;
        border: 1px solid #000;
        background:greenyellow url(123.jpg) no-repeat;
        background-size:cover;
    }

    效果:

  • 相关阅读:
    Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
    BZOJ 1293 SCOI2009 生日礼物 堆
    Git小玩
    VM tools安装错误The path "" is not a valid path to the xx generic kernel headers.
    css hover对其包括的元素进行样式设置
    C#高级编程---暂停计划
    如何配置和使用Tomcat访问日志
    关于性能测试应该知道的一些事(转载)
    Linux 平台如何查看某个进程的线程数?
    《让LoadRunner走下神坛》
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6089489.html
Copyright © 2011-2022 走看看