相关CSS圆角属性:
border-radius:CSS3标准属性
-moz-border-radius:Firefox用来显示圆角的属性
-webkit-border-radius:Chrome、Safari用来显示圆角的属性
/* css圆角属性 */
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
参考
MDN:Mozilla开发者网络 - border-radius中关于CSS3属性border-radius的浏览器兼容性可知:
IE9、Firefox 4.0(Gecko2.0)、Chrome4.0(WebKit)、Opera10.5、Safari5. 0(WebKit)开始都
已经支持标准的border-radius属性。
如果要使小于4.0的Firefox支持圆角,那么要使用属性
-moz-border-radius
如果要使小于4.0的Chrome或者小于5.0的Safari支持圆角,那么要使用属性
-webkit-border-radius
即对于浏览器:FF4.0+、Chrome4.0+、Opera10.5+、Safari5+、IE9.0+,
都直接支持CSS3标准属性border-radius而无需使用各浏览器自己定制的属性了。
参考:
Border-radius: create rounded corners with CSS!
[url=http://www.w3.org/TR/css3-background/
]W3C Backgrounds and Borders Specification[/url]
相关CSS阴影属性:
box-shadow:CSS3标准属性,
多个阴影属性之间可以用逗号分隔
-moz-box-shadow:Firefox用来显示阴影的属性
-webkit-box-shadow:Chrome、Safari用来显示阴影的属性
/* css阴影属性 */
-webkit-box-shadow: 0 1px 2px red;
-moz-box-shadow: 0 1px 2px blue;
box-shadow: 0 1px 2px green;
语法:
box-shadow: none | <shadow> [,<shadow>]*
where <shadow> is defined as:
inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]
- inset:内部阴影,默认是外部阴影
- offset-x:水平偏移
- offset-y:垂直偏移
- blur-radius:模糊度
- spread-radius:伸展度?
- color:颜色
参考
MDN:Mozilla开发者网络 - box-shadow中关于CSS3属性box-shadow的浏览器兼容性可知:
IE9、Firefox 4.0(Gecko2.0)、Chrome10(WebKit)、Opera10.5、Safari5. 1(WebKit)开始都
已经支持标准的box-shadow属性。
如果要使小于4.0的Firefox支持阴影,那么要使用属性
-moz-box-shadow
如果要使小于10.0的Chrome或者小于5.1的Safari支持圆角,那么要使用属性
-webkit-box-shadow
即对于浏览器:FF4.0+、Chrome10.0+、Opera10.5+、Safari5.1+、IE9.0+,
都直接支持CSS3标准属性box-shadow而无需使用各浏览器自己定制的属性了。
参考:
CSS3属性之二:box-shadow
MDN - box-shadow属性
text-shadow:文字阴影
https://developer-new.mozilla.org/en-US/docs/CSS/text-shadow
text-overflow:文本裁剪省略
https://developer-new.mozilla.org/en-US/docs/CSS/text-overflow
分享到:
相关推荐
让IE实现CSS3中的border-radius(圆角)
引入PIE.htc使ie7,ie8 支持css3 border-radius圆角效果
让IE6也识别CSS3-圆角效果应用border-radius
css3教程应用css3 圆角border-radius属性制作...
border-radius CSS3中的代表——第一个在社区中得到广泛使用新属性。这意味着,除去Internet Explorer 8及更低版本,所有的浏览器可以显示圆角。为了使样式能正确应用,需要为Webkit和Mozilla内核添加前缀。 CSS ...
实现边框圆角 -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//...
NULL 博文链接:https://jm1999.iteye.com/blog/2218022
在 http://www.cnblogs.com/strick/p/4843595.html 有描述
CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border...
前面系统总结了CSS3中Gradient和RGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,...
今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...
npm install tailwindcss-border-gradient-radius yarn add tailwindcss-border-gradient-radius 用法 简单的 { theme : { linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , background :...
-webkit-border-radius:苹果;...border-radius:用这个属性能实现圆角边框的效果。 现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码: 复制代码代码如下: <div style=”bac
解决border-radius失效问题
border_radius属性画出水滴样式
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种...
css3的 border-radius 为了兼容ie8浏览器所用到的插件以及实例。为什么要50个字节啊,竟然不能设置成免费。。