zoukankan      html  css  js  c++  java
  • css3属性(一)

    圆角效果:
    border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

    阴影:
    box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式(inset)];
    1、阴影模糊半径与阴影扩展半径的区别
    阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
    阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
    2、X轴偏移量和Y轴偏移量值可以设置为负数
    3.注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
    4.如果添加多个阴影,只需用逗号隔开即可。如:
    .box_shadow{box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

    为边框应用图片:
    border-image:url(xx.jpg) 10px 20px no-repeat/repeat/round/stretch;

    颜色RGBA
    RGBA(0,0,0,0.5)最后值为透明度

    渐变色彩
    back-image下属性
    1.线性渐变:linear-gradient(to bottom/180deg,#fff,#999)
    参数分别为渐变方向、角度或方向、开始位置颜色、结束位置颜色
    2.径向渐变:radial-gradient

    文本的溢出省略
    text-overflow:clip/ellipsis 剪切/显示省略标记
    white-space:nowrap; 文本控制在一行
    word-wrap:normal/break-word 控制文本连续换行/断开换行

    字体
    @font-face{
    font-family:字体名词;
    src:路径;
    .eot;/* IE9*/
    .eot?#iefix/* IE6-IE8 */
    .woff') /* chrome、firefox */
    .ttf/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    .svg/* iOS 4.1- */
    }

    文本阴影:
    text-shadow:X-Offset Y-Offset blur color;水平偏移量、垂直偏移量、阴影模糊程度、阴影颜色;

    背景图片原始起始位置
    backgroud-origin:border-box | padding-box | content-box; 边框、内边距、内容区域(如果背景不是no-repeat,这个属性无效)

    背景裁剪
    background-clip:border-box/padding-box/content-box/no-clip 从(边框、内填充、内容区域、不裁剪)向外裁剪背景

    backgroud-size:auto/长度值/百分比/cover/contain
    1.cover:将背景图片等比例缩放以填满整个容器
    2.contain:将背景图片等比例缩放至某一边紧贴容器边缘为止

  • 相关阅读:
    命令行颜色换算器(基于python)
    VPS常用操作(自用)
    自动读取虚拟币ETC行情并语音提醒的小工具(mac OSX)
    nginx最基本操作
    一个平庸程序员的自白
    unity 2d游戏 按y坐标排序子对象
    开源输入法推荐
    unity插件,从一段文字中提取中文并去重
    考试总结(CE???)
    螺旋矩阵
  • 原文地址:https://www.cnblogs.com/yzg1/p/4656858.html
Copyright © 2011-2022 走看看