zoukankan      html  css  js  c++  java
  • 阴影边框以及渐变

    一、盒子阴影和文字阴影
    box-shadow;
    盒子阴影 ie9
    语法:
    box-shadow:1px 2px 3px 4px color;
    5个参数:
    参数一:水平偏移量 +- 必选
    参数二:垂直偏移量 +- 必选
    参数三:阴影模糊值 + 必选
    参数四:阴影外延值 + 可选
    参数五:阴影的颜色 color 必选
    外延值可以省略
    一个盒子可以有多个阴影
    box-shadow:0px 0px 12px red, 2px 2px 3px 3px orange;
    设置内阴影:默认阴影都是外阴影
    inset
    box-shadow:inset 0 0 32px 10px red;
    text-shadow:
    文本阴影
    4个参数,没有外延值 ie10
    text-shadow :1px 1px 1px red;
    二、图片边框 ie10
    border-image 设置图片边框
    border-image:border-image-source || border-image-slice[/border-image-width?[/border-image-outset]?]? || border-image-repeat
    border-image-source:用于设置图片边框的路劲
    border-image-slice:图片边框向内的偏移量
    border-image-图片边框的宽度
    border-image-outset:图片边框图像区域超出边框的偏移量
    border-image-repeat:指定图片边框背景填充方式
    stretch | repeat | round
    stretch:默认的,拉伸填充
    repeat:指定平铺填充背景图片,当遇到边界时,被剪断
    round:指定平铺填充背景图片,会根据边框的尺寸,动态调整图片的大小,直到图片的大小刚好能够填充整个边框
    三、背景background
    如果没有渐变的时候,我们可以使用渐变的图片进行横向平铺实现渐变的效果
    CSS3中有一个特殊方法可以实现渐变, ie9开始兼容
    语法:
    background-image:-webkit-linear-gradient(top,red,blue)
    -webkit-:谷歌等谷歌内核浏览器的前缀
    -moz-:火狐前缀
    -ms-:ie前缀
    -o-:欧朋前缀
    1.线性渐变
    -webkit-linear-gradient(top,red,blue);
    参数1:top 从上到下渐变
    bottom: 从下到上渐变
    right 从左到右渐变
    left 从右到左渐变
    top-left 左上渐变到右下
    45deg 角度
    30px 值
    参数2:从哪个颜色开始渐变 20%表示从20%的位置开始渐变为红色
    参数3:渐变到哪个颜色 60%表示从60%开始渐变为蓝色
    参数1使用角度时:
    使用谷歌、火狐、ie、欧朋等标准浏览器时,水平向左为0deg,向下是90deg;
    如果不加前缀,使用w3c的标准 ,向下是0deg,向左是90deg

    通常不使用角度进行渐变,一般是方位词
    2.径向渐变
    -webkit-radius-gradient()
    径向渐变起点一般使用px值
    -webkit-radius-gradient(100px 80px,red,blue,green);
    3.文字渐变
    文本填充颜色,-webkit-text-fill-color: 不支持ie,只能支持-webkit-内核的浏览器
    背景切割(文本进行切割)
    -webkit-background-clip:text;不支持ie,只能支持-webkit-内核的浏览器

  • 相关阅读:
    网络基础 03 交换机基本原理与配置
    网络基础 02 网络布线与数制转换
    C#操作excel(读取excel里的图片并show在页面上)
    让IIS支持中文文件名和目录
    Asp.net中防止用户多次登录的方法
    【转摘】一道关于实例化顺序的C#面试题
    选项卡调其他窗体方法
    同一个工作组的计算机能ping通不能访问对方共享资源
    Combobox出现System.Data.DataRowView的原因,以及指定ValueMember的时机问题
    无法嵌入互操作类型“Microsoft.Office.Interop.Excel.ApplicationClass”。请改用适用的接口。
  • 原文地址:https://www.cnblogs.com/txf-123/p/11190089.html
Copyright © 2011-2022 走看看