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属性,则可以完成一些网站常用的显示样式
css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性的更多相关文章
- CSS3(1)---圆角边框、边框阴影
CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...
- css3实现圆角边框渐变
<button class="border">112233</button> 创建button .border{ position: relative; b ...
- css3如何实现圆角边框
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...
- css3圆角边框,边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- css3学习总结2--CSS3圆角边框
绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- css3圆角边框
圆角边框 一.border-radius属性简介 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...
随机推荐
- ASP.NET MVC下判断用户登录和授权状态方法
在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization),则对于某种用户角色才开放. 在a ...
- 【LOJ】#2244. 「NOI2014」起床困难综合症
题解 写水题放松一下心情 二进制有个很好的性质是每一位是独立的,我们按位贪心,先看这一位能不能填1,然后看看如果这一位填0那么运算后最后这一位是不是1,是的话就退出,然后看看这一位如果填1最后是1这一 ...
- Git github webhook 自动更新/部署代码 php自动更新脚本
这几天尝试了利用github的webhook,当代码更新到github,我们的测试服务器自动更新最新的gitbub仓库代码. 先列几个大概步骤,有时间再补充详细 1 . 服务器生成ssh key,一般 ...
- Ionic Js八:头部和底部
1.ion-header-bar 这个是固定在屏幕顶部的一个头部标题栏.如果给它加上'bar-subheader' 这个样式,它就是副标题. <ion-header-bar align-titl ...
- 洛谷P2525 Uim的情人节礼物·其之壱 [康托展开]
题目传送门 Uim的情人节礼物·其之壱 题目描述 情人节到了,Uim打算给他的后宫们准备情人节礼物.UIm一共有N(1<=N<=9)个后宫妹子(现充去死 挫骨扬灰!). 为了维护他的后宫的 ...
- 文件系统层级结构标准(FHS)
参考资料:FHS 简介 FHS目前发展到3.0版本,发布于2015年6月3日,由Linux基金会在负责维护.它规定了Linux的文件层级结构,使得各Linux发行版.软件开发商知道应该将哪些文件放在哪 ...
- nginx启动 [emerg] 12180#12948: invalid number of arguments in "root" directive in D:
注意空格和中文符号 修改了就可以了. 还要注意最后需要加分号; https://blog.csdn.net/rodulf/article/details/53557278
- [转]kali中eth0网卡突然消失解决方案
前言 不知道怎么kali的eth0网卡突然消失了.这可有点难受啊.在网上查找了一番找到了解决办法,特此记录. 问题 怎么办? 解决办法 首先使用ifconfig -a命令查看所有的网卡接口 发现 ...
- input用类写的方法
- bzoj 4034
我写的是 DFS序+线段树 DFS序(出去的位置要单独建点)上,进入的位置是权值,出去的位置是权值的相反数,可以证明节点i到根节点的路径上的点的权值和是DFS序上1-in[i]的和. 只要搞出每个区间 ...