CSS3的几个标签速记(推荐)
border-radius:CSS3圆角
语法:border-radius:25px;
椭圆边角:语法-border-radius:xx%;或者15px/100px;
box-shadow:CSS3盒阴影
语法:box-shadow:5px 5px 10px #eee;
border-image:使用图像创建一个边框
语法:boder-image:url(xx.xxx) 30 30 round
round是平铺、stretch是拉伸
background-size:自定义设置背景图片的大小
语法:background-size:--px --px;
背景图片完全填充background-size:100% 100%;
background-origin:指定了背景图像的位置区域 border-box padding-box content-box
CSS3允许多个背景图片:background-image:url(img_flwr.gif),url(img_tree.gif);
CSS3渐变
linear-gradients:线性渐变
语法:background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
使用透明度transparency
语法:linear-gradients(to right,rgb(255,0,0,0),rgb(255,0,0,1));
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
radial-gradients:径向渐变
语法与linear-gradients一样,这里不重复。
text-shadow:文本阴影
语法:text-shadow:--px --px --px #eee;
word-wrap:break-word如果某个单词过长溢出文本框,此标签强制换行
以上这篇CSS3的几个标签速记(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
原文地址:http://www.cnblogs.com/zhouliang/archive/2016/07/06/5647213.html
相关文章
- 这篇文章主要为大家详细介绍了CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以参考一下2016-06-16
- 是一段实现了12中非常炫酷的表单浮动标签特效代码,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-04-10
仅6个span标签实现的纯CSS3动态Loading加载特效源码
今天我们介绍一款实现超级简单的CSS3进度条动画,该进度条是条形进度条,仅用了6个span标签和相应的CSS3代码实现了该CSS3条形进度条。呈现出波浪滚动的效果。整体效果动感2014-10-31一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
一款超酷的js+css3实现的3D标签云特效,兼容ie7/8/9,看惯了flash的,来试试这个吧,下面有个不错的示例,希望大家不要错过2013-11-18jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效
一个功能非常完美的ajax tab切换效果,使用html5、css3,jquery等完成,彩色的tab标签2013-05-13- 用CSS3代码来写,非常简洁,无需图片配合,只要纯代码即可实现,还有更简洁的么2013-03-27
最新评论