彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-11-28 11:58 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

CSS3新增UI样式彩世界平台官方网址

-border-image 边框背景

  • Mask-image
  • Mask-position
  • Mask-repeat

closest-size 向最近端渐变
closest-corner 向最近角渐变
farthest-corner 向最远角渐变
contain 包含(元素将其包含 使其渐变不会超出元素周围)
cover 覆盖(渐变将整个元素铺满)

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

-radial-gradient:方向,关键字(可选),颜色;

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

IE9及9以下不支持线性渐变

 

background-origin:border-box; 从边框开始计算
                           content-box 从内容开始计算
                           padding-box 从内补白开始计算(默认)
background-clip: 背景裁剪

(2)参数

径向渐变关键字

    彩世界平台官方网址 1

-border-image:图片链接 图片切割上下 图片切割左右 边框排列方式 ; 
border-image-repeat:;边框排列方式
                    round 平铺 与repeat效果一样
                    repeat 重复
                    stretch 拉伸 默认
在-webkit-中会自动补上中间部分 

 

通过滤镜处理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');
可兼容到IE6
startColorstr 开始颜色
endColorstr 结束颜色
GradientType 1为从left->right 0为从top->bottom

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

-linear-gradient:  线性渐变

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

彩世界平台官方网址,注:目前只在火狐中起效果

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

 

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

background-origin:背景图原点设置

black 50%,位置可选

border-radius 圆角

1、圆角:border-radius

-webkit-repeating-linear-gradient  平铺渐变

2、边框

例:-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

 

-moz-border-left-colors: 边框多色彩处理

默认:top left(左上角)

参数可为像素 也可为百分比
当一个参数时 作用范围为四个角
当两个参数时 作用范围为 左上右下 右上左下
当三个参数时 作用范围为 左上 右上左下 右下
当四个参数时 作用范围为 左上 右上 右下 左下
当参数中有'/'时 例如 100px/150px 则表示:X轴半径/Y轴半径

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

background-size:背景尺寸

**4、径向渐变**

background-size:contain 包含(缩小) 元素包含背景图(背景图刚好放进盒子里)
cover 覆盖(放大) 背景图等比放大后将元素填满

(2)参数

background-clip:border-box; 默认
解决背景半透明边框显示背景图片的问题:
                       padding-box 切除padding以外的背景
                       content-box 切除content以外的背景
                       -webkit-background-clip:text; 切除文字以外的背景(目前火狐不适用)

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

 

 

 

 

 

**5、背景**
**

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

 

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

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

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

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

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

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

black 50%,位置可选

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

 

 

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

3、线性渐变

  • 起点:从什么方向开始渐变
  • 起点:可以是关键字(left,top,right,bottom),具体数值或百分比

 

  • 1个:都一样 border-radius: 一样
  • 2个:对角 border-radius: 左上&右下 右上&左下
  • 3个:斜对角 border-radius: 左上 右上&左下 右下
  • 4个:全部,顺时针 border-radius: 左上 右上 右下 左下
  • border-radius: 1-4个数字 / 1-4个数字——前面是水平半径,后面是垂直半径border-radius: 10px/5px;
  • 不给“/”则水平和垂直一样 
  • border-image-sourceg 引入图片
  • border-image-slice 切割图片
  • border-image-width 边框宽度
  • border-image-repeat 图片的排列方式:round 平铺,repeat 重复,stretch拉伸

**6、遮罩**

(1)边框图片:border-image

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

 

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

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

 

(1)格式

(1)格式

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:CSS3新增UI样式彩世界平台官方网址

关键词: css3