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;
    }

    效果:

  • 相关阅读:
    nRF5 SDK for Mesh(二) Getting started 快速开始
    QT 简单 TCP 通信,发送数据到服务器
    Bluetooth® Low Energy Beacons
    CC2540 低功耗串口, POWER_SAVING 模式 下 串口 0 的使用
    LWIP network interface 网卡 初始化 以 STM32 为例子 后面会有 用 2G 或者4G 模块 用 PPP拨号的 形式 虚拟出网卡 所以先以 这个为 前提
    R 语言入门
    Django 框架
    Windows 下 Django 安装
    windows 下搭建 git 服务器 copssh+git
    python Pystaller 将python文件打包成exe
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6089489.html
Copyright © 2011-2022 走看看