zoukankan      html  css  js  c++  java
  • CSS3新增UI样式

    1、圆角:border-radius

    • 1个:都一样 border-radius: 一样
    • 2个:对角 border-radius: 左上&右下 右上&左下
    • 3个:斜对角 border-radius: 左上 右上&左下 右下
    • 4个:全部,顺时针 border-radius: 左上 右上 右下 左下
    • border-radius: 1-4个数字 / 1-4个数字——前面是水平半径,后面是垂直半径border-radius: 10px/5px;
    • 不给“/”则水平和垂直一样 

    2、边框

    (1)边框图片:border-image

    • border-image-sourceg 引入图片
    • border-image-slice 切割图片
    • border-image-width 边框宽度
    • border-image-repeat 图片的排列方式:round 平铺,repeat 重复,stretch拉伸

    (2)边框颜色 border-colors(火狐下)

    3、线性渐变

    (1)格式

    • 线性渐变格式 linear-gradient([<起点> || <角度>] ?<点>, <点>…)
    • 只能用在背景上 

    (2)参数

    • 起点:从什么方向开始渐变

    默认:top left(左上角)

    • 角度:从什么角度开始渐变

    xxx deg的形式(逆时针旋转)

    • 点:渐变点的颜色和位置

    black 50%,位置可选

    (3)实例:background-image:-webit-linear-gradient(60deg,red 0,blue 40%,green 100%)

    (4)平铺:background:-webit-repeating-linear-gradient(15deg,green ,green 10px,#fff 10px,#fff 20px,);

    (5)兼容IE9以下:(gradientType=1为从左往右,0为从上往下)

        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');  

    4、径向渐变

    (1)格式

    • 线性渐变格式 radial-gradient([<起点>]? [<形状> || <大小>]?  <点>, <点>…)

    (2)参数

    • 起点:可以是关键字(left,top,right,bottom),具体数值或百分比
    • 形状:ellipse(椭圆)、circle(圆形)
    • 大小 :具体数值或百分比,也可以是关键字(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover));

        

        注意:firefox目前只支持关键字

    • 点:渐变点的颜色和位置

    black 50%,位置可选

    5、背景

    (1)多背景:逗号分开 background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

    (2)背景尺寸:background-size:x y

    • background-size:100% 100%
    • Cover 放大
    • Contain 缩小

    (3)背景原点:background-origin : border | padding | content 

    • border-box: 从border区域开始显示背景。
    • padding-box: 从padding区域开始显示背景。
    • content-box: 从content区域开始显示背景。

    (4)背景裁剪:background-clip: border | padding | content|no-clip 

    • border-box: 从border区域向外裁剪背景。
    • padding-box: 从padding区域向外裁剪背景。
    • content-box: 从content区域向外裁剪背景。
    • text: 从文本区域向外裁剪背景。(仅支持webkit内核浏览器)

    6、遮罩

    • Mask-image
    • Mask-position
    • Mask-repeat
  • 相关阅读:
    [Unity UGUI]ScrollRect效果大全
    Lua元表
    [译]使用AssetBundle Manader
    [Unity 设计模式]桥接模式(BridgePattern)
    [Unity 设计模式]IOC依赖倒置
    基于Shader实现的UGUI描边解决方案
    UGUI实现不规则区域点击响应
    使用消息分发机制降低程序中的耦合度
    使用IDA静态分析解密《舰娘Collection》的lua脚本
    定制自己的Unity脚本模板
  • 原文地址:https://www.cnblogs.com/BetterMyself/p/5660072.html
Copyright © 2011-2022 走看看