css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

    首先我要介绍的是border-radius属性,它的作用是实现圆角边框,其中border-radius:20px;表示,一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高,如果是正方体则会是一个球,依靠这个属性我们可以不用ps6的情况下,做成一个较为美观的按钮或者控件,它还拥有分别控制4个角的属性border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius,这对我们控制图型有了更准确的把握。

    然后要详细介绍的是box-shadow属性,向边框添加阴影,其中它有六个重要的参数。

    1.阴影类型:此参数可选,如果不设值,默认的阴影类型是外部阴影,如果取其唯一值“inset”则是内阴影。

    2.h-shadow:必有,阴影的水平偏移位置,其值可以是正负值,为正值,其阴影在对象右边,为负值,其阴影在对象左边。

    3.v-shadow:必有,阴影的垂直偏移位置,其值也可为正负值,为正值,其阴影在对象的底边,为负值,其阴影在对象的上边。

    4.阴影模糊:此参数可选,其值只能为正值,值为0时,表示阴影不具备模糊效果,其值越大则阴影边缘就越模糊。

    5.阴影扩展半径:次参数可选,其值可以是正负值,如果为正,整个阴影都延展扩大,如果为负值,则阴影缩小。

    6.阴影颜色:此参数可选(这个属性我就不加以解释了,就是我们常用的颜色属性)

    这两个属性配合前面学过的transition属性和transform属性,则可以完成一些网站常用的显示样式

    

时间: 2024-10-04 18:34:34

css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性的相关文章

CSS3(1)---圆角边框、边框阴影

CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径. 1.圆角边框语法 圆角边框属性 : border-radius 属性值 border-radius: 属性1,属性2,属性3,属性4 # 四个值:第一个值为左上角,第二个值为右上角,第三个值为

css3背景、边框、和补丁相关属性

border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的默认值将采用文本颜色 相关属性: border-top,border-left,border-right,border-bottom:它们分别对边框的某个方向起作用,语法基本与border相同 border-bottom-color,border-top-color,border-bottom-co

CSS3下不一样的阴影、背景和圆角边框样式

CSS3下不一样的阴影.背景和圆角边框样式 CSS2.1 发布至今已有7年的历史.CSS3的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果 当前,CSS3技术最适合在移动Web开发中使用的特性包括: ●增强的选择器 ●阴影 ●强大的背景设置 ●圆角边框 阴影: 现在的CSS3样式已经支持阴影样式效果.目前可使用的阴影的效果分为两种:文本内容的阴影效果和元素的阴影效果. box-shadow CSS3的box-shadow属性是让元素具有阴影的效果,其语法如下:

CSS3圆角边框

CSS3圆角边框实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3圆角边框</title> <style>  div{ text-align:center; border:2px solid #a1a1a1; padding:10px 40px;  background:#dddddd; width:350px;

css3学习总结1--CSS3圆角边框

绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-radius: 20px; -webkit-border-radius:20px; background-color:skyblue; padding:20px; width:180px; } 在示例中具有一个div元素,使用border-radius属性将其边框绘制为圆角边框,圆角半径为20像素,边框

纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形 语法格式: border-radius:  水平半径/垂直半径 只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角  右上角  右下角  左下角;  

css3背景、边框、和补丁相关属性 (二)

背景 background : background-color || background-image || background-repeat || background-attachment || background-position 默认值为:transparent none repeat scroll 0% 0%. 设置对象的背景样式.如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置.例如: 设置 background : white 等于设置 b

WPF 使用Border创建圆角边框

创建圆角边框可以通过设置border的 CornerRadius 属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red" CornerRadius="20,0,0,0" > 效果图: 位置说明: CornerRadius="左,右,右下,左下" 提示: 如过圆角处有颜色,请将外层容器的背景色设置为透明 Background="Transparent&quo

css3:border-radius圆角边框详解 (变圆 图片)

转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角.当年前辈们都是用图片君搞定圆角的年代或用一条条边框构造的年代已经一去不复返,而移动互联网的高速发展为border-radius属性的飞速发展,so今天就来聊聊圆角边框.虽然英文翻译过来叫做半径弧度,但是为了能让大家更加熟悉