css3基础点

时间：2016-07-25 01:37:20 阅读：211 评论：0 收藏：0 [点我收藏+]

标签：

文本属性：color,font，text-decoration，text-align，vertical-align，white-space，content

CSS3属性（内核前缀）

Mozilla 内核 css前缀-moz;

WebKit 内核 css前缀-webkit ;（谷歌已换用blink内核）

Opera 内核 css前缀 -o ; （欧朋已换用blink内核）

Trident 内核 css前缀 -ms ;

border-image ：

stretch 拉伸方式来填充边框背景图 |

repeat 平铺图片碰到边界时超出截断 |

round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚好铺满整个边框

background: transparent ; 等价 background:rgba(0,0,0,0);

color: transparent ; 等价 color:rgba(0,0,0,0);

CSS3渐变 css3实现背景颜色线性渐变

div{
width:500px;
border:1px solid #FA0;
background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*横向渐变*/
background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*纵向渐变*/
-webkit-background-clip: text ;
/*只有webkit内核支持text的剪切模式*/

color:transparent;
}

4. CSS3倒影 -webkit-box-reflect

1.方向 -webkit-box-reflect: below/above/left/right

2.距离

3.透明度

-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,

rgba(0,0,0,0.6) 100%)

旋转：-webkit-transform: rotate(120deg);

平移：-webkit-transform: translate(20px, 10px); -moz-transform: translateX(20px);

缩放： -webkit-transform: scale(1.1,0.5); X方向缩放1.1倍，Y方向缩放0.5倍

backface-visibility: visible | hidden; 定义当元素不面向屏幕时是否可见。可用在扑克牌旋转上。

css3基础点

标签：

原文地址：http://www.cnblogs.com/tu-8/p/5702020.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行