首先我要介绍的是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属性,则可以完成一些网站常用的显示样式

    

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

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

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  2. css3实现圆角边框渐变

    <button class="border">112233</button> 创建button .border{ position: relative; b ...

  3. css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  4. css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  5. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  6. css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...

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

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  9. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

随机推荐

  1. 为什么Java中Long类型的比float类型的范围小?

    为什么Long类型的比float类型的范围小? 2015-09-15 22:36 680人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 作为一个常识,我们都知道浮 ...

  2. 数据挖掘算法:关联分析二(Apriori)

    二.Apriori算法 上文说到,大多数关联规则挖掘算法通常采用的策略是分解为两步: 频繁项集产生,其目标是发现满足具有最小支持度阈值的所有项集,称为频繁项集(frequent itemset). 规 ...

  3. @Resource与@Autowired注解的区别(转)

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解.如:@Resource.@PostConstruct及@PreDestroy 1.@Autowired ...

  4. 查看锁信息(开启InnoDB监控)

    当前mysql版本:5.6.21 一.背景 在mysql处理死锁问题时,由于show engine innodb status输出来的死锁日志无任务事务上下文,并不能很好地诊断相关事务所持有的所有锁信 ...

  5. requests https访问错误SSLError: certificate verify failed 及InsecureRequestWarning处理办法

    转自: https://blog.csdn.net/mighty13/article/details/78076258?locationNum=3&fps=1 在使用requests访问某网站 ...

  6. 鸟哥的私房菜:Linux文件与目录管理

    1. 目录与路径 1.1 相对路径与绝对路径           绝对路径:路径的写法『一定由根目录 / 写起』,如:/usr/share/doc 这个目录.     相对路径:路径的写法『不是由 / ...

  7. java集合系列之三(ArrayList)

    上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具体实现类进行讲解:首先,讲解List,而List中ArrayList又最为常用.因此,本章我们讲解ArrayLi ...

  8. bzoj 3275 最小割

    给你一堆东西,叫你选一些东西出来,使得价值最大,要求选出的东西集合中的任意a,b满足性质p. 可以考虑: 1.拟阵? 2.二分图? 这道题由于数学硬伤,不知道不存在两条直角边是奇数,斜边是整数的直角三 ...

  9. Codeforces Round #359 (Div. 1) B. Kay and Snowflake dfs

    B. Kay and Snowflake 题目连接: http://www.codeforces.com/contest/685/problem/B Description After the pie ...

  10. Codeforces Round #350 (Div. 2) D1. Magic Powder - 1 二分

    D1. Magic Powder - 1 题目连接: http://www.codeforces.com/contest/670/problem/D1 Description This problem ...