相关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
分享到:
相关推荐
1. **圆角效果** (border-radius): CSS3允许通过`border-radius`属性为元素的边框设置圆角,例如`border-radius: 10px;`可以创建一个10像素的圆角。 2. **边框阴影** (box-shadow): `box-shadow`属性用于添加阴影...
- `text-overflow`可以设置文本超出容器时的处理方式,如`clip`裁剪或`ellipsis`显示省略号。 - `text-shadow`为文本添加阴影效果,包括水平、垂直偏移、模糊半径和颜色。 - `text-decoration`新增了`text-fill-...
- **圆角边框**:`border-radius`属性允许创建圆形或椭圆形的边框。 - **边框图片**:`border-image`可以使用图像来创建边框。 - **透明边框**:`border-style`中的`none`和`hidden`可实现透明边框。 4. **文本...
CSS3提供了文本阴影、文本裁剪和单词换行等效果。例如: ```css p { text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* 文本阴影 */ text-overflow: ellipsis; /* 多余文本用省略号表示 */ overflow: hidden; ...
### CSS3 盒子阴影(Box Shadow) - **box-shadow**: 设置元素的阴影效果。例如:`box-shadow: 10px 10px 5px #888;` 表示水平偏移量为10像素,垂直偏移量为10像素,模糊距离为5像素,颜色为#888。 ### CSS3 边框...
1. **文本阴影**:`text-shadow`属性为文本添加阴影效果。 2. **文本溢出**:`overflow-wrap`和`word-break`控制文本换行,防止长单词导致的布局混乱。 3. **文本装饰**:如`text-decoration-line`、`text-...
- **圆角边框**:`border-radius`使得元素边框可以是圆形或椭圆形。 - **阴影**:`box-shadow`为元素添加阴影效果。 - **背景图片裁剪和定位**:`background-size`控制背景图片大小,`background-origin`和`...
CSS3.0参考手册doc整理版是一份详细概述了CSS3新特性的文档,涵盖了从边框、背景、颜色到文本效果、用户界面以及选择器等多个方面。以下是对这些主要知识点的详细介绍: 1. **边框(Border)**: - **border-color**...
- **文字溢出**:`text-overflow`属性处理超出容器的文字,可以显示省略号或自定义内容。 6. **响应式设计** - **媒体查询(Media Queries)**:根据设备特性应用不同的CSS规则,实现响应式布局。 - **断点管理*...
1. **圆角边框**:`border-radius`属性让元素边框可以呈现为圆角,无需额外的图片或HTML结构。 2. **阴影效果**:`box-shadow`和`text-shadow`可以为元素添加阴影效果,提升视觉效果。 3. **渐变背景**:`linear-...
3. **边框与背景**:CSS3允许使用圆角边框(`border-radius`)、渐变背景(`linear-gradient`和`radial-gradient`)、阴影(`box-shadow`)等,增强了界面的美观度。 4. **多列布局**:`column-count`、`column-gap...