`

css3中的几个属性:text-shadow、box-shadow 和 border-radius

 
阅读更多

前三个值分别代码RBG的值,最后一个值代表透明度(0表示透明,1表示不透明)。

  RGBA可以用于任何和color有关的属性,例如字体颜色、边框颜色、背景颜色和阴影颜色等。

 

  文字阴影

  文字阴影的结构按照这样的顺序:x-offset, y-offset, blur, 和 color。

  为x-offset设置负值会将阴影位置改变到左边,为y-offset设置负值会将阴影位置改变到头部。我们也可以使用RBGA设置阴影的颜色。

  你可以设置一组text-shadow,中间以逗号相隔。下面的例子使用两个text-shadow(顶部1px 和 底部1px),为名字设置了新闻文字效果。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

 

  边框半径

  边框半径对属性赋值的便捷写法类似于padding和margin(例如:border-radius: 20px)。为了让有些浏览器能正确渲染效果,需要在属性前面加前缀,例如针对webkit浏览器需要添加 "-webkit-" 前缀,firefox浏览器需要添加 "-moz-" 前缀。

  你可以为不同的边角设置不同的半径,注意webkit和firefox浏览器,每个边角有不同的属性名称。

 

  盒子阴影

  盒子阴影的结构和text-shadow 属性一样,按照这样的顺序: x-offset, y-offset, blur, 和 color。

  你可以为盒子阴影设置很多效果,例如下面的例子使用一组参数来设置效果(参数之间以逗号相隔)。

-moz-box-shadow: 
-2px -2px 0 #fff, 
2px 2px 0 #bb9595, 
2px 4px 15px rgba(0, 0, 0, .3);

分享到:
评论

相关推荐

    CSS3中border-radius、box-shadow与gradient那点事儿

    在CSS3中,border-radius、box-shadow和gradient是三个非常重要的样式属性,它们极大地提升了网页设计的美观性和表现力。让我们逐一深入探讨这三个概念。 首先,`border-radius`属性允许我们为元素的边框添加圆角,...

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先,`border-radius`属性是CSS3引入的新特性,允许我们为元素的边框创建圆角,而非传统的直角。然而,IE8及...

    CSS3属性box-shadow使用指南

    今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...

    CSS text-shadow,box-shadow,border-radius属性

    CSS中的text-shadow、box-shadow和border-radius属性是用于增强页面视觉效果的重要工具。这些属性自CSS3版本起被广泛采用,并在现代网页设计中扮演着至关重要的角色。下面将分别对这三个属性进行详细解释,并探讨...

    圆角魅力:CSS border-radius全攻略

    `border-radius`属性自CSS3版本引入以来,便迅速成为了设计师和开发者的宠儿。该属性主要用来创建具有圆角效果的边框,通过设置一个或多个角的半径值,可以轻松地调整元素的形状,从传统的方形到各种圆角甚至完全...

    CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

    本文介绍CSS 3部分新属性基础,包括RGBa、text-shadow、box-shadow、border-radius。这些属性通常用来增强网页布局和美誉度。(译者注:在支持CSS3的浏览器如Firefox、Safari、IE9等可点击图片查看演示。)

    border-radius兼容ie78

    要使用CSS3 Pie,你需要在HTML文档中引入Pie.js文件,并在需要应用`border-radius`的元素上添加特定的CSS类和属性。例如: ```html <!DOCTYPE html> .rounded-corners { behavior: url(/path/to/pie/PIE.htc)...

    css光影效果

    首先,我们需要了解CSS中的基本光影属性:`box-shadow`和`text-shadow`。`box-shadow`用于给元素添加阴影效果,其语法如下: ```css element { box-shadow: h-offset v-offset blur-radius spread-radius color ...

    CSS3伪三维径向圆形按钮,无JS及图片,纯HTML.rar

    此效果没有用图片和任何JS!适用浏览器名称及版本:FF 3.5 , Opera 10.5 , Safari 4 , Google Chrome 4.0 , IE 9 IE8及之前版本均不能看到效果!!... 谷歌下个版本将会很好的支持 box-shadow inset

    css3实现圆角矩形

    在CSS3中,不仅可以用`border-radius`创建圆角,还可以与其他属性结合,如`box-shadow`(阴影效果)、`background-image`(背景图片)等,创造出丰富的界面效果。例如,一个带有圆角、阴影和渐变背景的按钮可能如下...

    css3.0参考手册 CHM

    border-color border-image border-radius box-shadow Backgrounds background-origin background-clip background-size multiple backgrounds Color HSL colors HSLA colors opacity RGBA colors Text effects text...

    css3 滚动条美化

    CSS3滚动条美化是网页设计中的一个重要技巧,它允许开发者通过CSS样式来改变浏览器默认的滚动条样式,提升用户体验和界面美观度。在现代网页设计中,滚动条不仅仅是功能性的工具,也是展示网站设计风格和品牌特色的...

    css-border-effects.zip

    8. **边框阴影**:`box-shadow`属性可以为元素添加阴影效果,包括水平偏移、垂直偏移、模糊半径和阴影颜色。 9. **边框透明度**:利用`rgba()`函数,可以在边框颜色中设置透明度,以创建半透明边框。 10. **伪元素...

    border-radius失效

    在CSS世界中,`border-radius`属性用于为元素添加圆角效果,使边框不再呈现为直角,而是呈现出各种半径的弧形。然而,有时候我们可能会遇到`border-radius`失效的问题,导致元素的边角无法按照预期显示为圆形或椭圆...

    无图片CSS圆角的五个实例

    CSS3引入的`border-radius`属性是实现无图片圆角的核心。这个属性允许我们为元素的每个角落指定不同的圆角半径,语法如下: ```css element { border-radius: top-left-radius top-right-radius bottom-right-...

    CSS3 Cheatsheet

    - **border-radius**: 标准CSS3属性,被广泛支持。 **语法示例**: ```css -webkit-border-radius: 10px; /* Webkit */ -moz-border-radius: 10px; /* Firefox */ border-radius: 10px; /* 标准 */ ``` **注意事项...

    CSS3悬停按钮动画代码

    可以利用`text-shadow`属性为文字添加阴影动画,或使用CSS3的`@keyframes`定义更复杂的文字动画: ```css button { text-shadow: none; transition: text-shadow 0.5s ease; } button:hover { text-shadow: 2px...

    ie-css3.htc 免费版

    在本例中,ie-css3.htc是一个JavaScript脚本,它模拟实现了CSS3的一些关键属性,如border-radius、box-shadow、linear-gradient等,使老版本的IE浏览器也能显示这些现代CSS3效果。 1. **border-radius**:CSS3中的...

Global site tag (gtag.js) - Google Analytics