博客
关于我
CSS3(1)---圆角边框、边框阴影
阅读量:458 次
发布时间:2019-03-06

本文共 986 字,大约阅读时间需要 3 分钟。

圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能

一、圆角边框

圆角在实际开放过程中,还是蛮常见的。以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径。

1、圆角边框语法

圆角边框属性 : border-radius

属性值

border-radius: 属性1,属性2,属性3,属性4# 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角border-radius: 属性1,属性2,属性3# 三个值:上->左右->下border-radius: 属性1,属性2# 两个值:上下->左右border-radius: 属性1# 一个值:四个圆角值相同

对于每个边角也可以单独写

border-top-left-radius:10px;      // 定义了左上角的弧度半径为10pxborder-top-right-radius:5px;      // 定义了右上角的弧度5px;border-bottom-right-radius:10px;  // 定义了右下角的弧度border-bottom-left-radius:10px;   // 定义了左下角的弧度

2、示例

1)画圆弧

	     

运行结果

很明显,这里四个圆弧的半径都为50px;

2)画圆

画圆的思路其实很简单,只要保证两点

1、盒子的长和宽要相等

2、圆弧的半径要为盒子长的一半

比如将上面属性修改为:

border-radius: 100px;

再运行

很明显这里已经是一个圆了。这里我们来思考为什么要设置圆弧设置盒子长的一半。

其实很简单,要实现圆,那么长和宽就应该相等,同时它们的长度就是直径,那么一半就是半径了。

二、边框阴影

除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观。

1、边框阴影语法

语法

box-shadow: h-shadow v-shadow blur spread color inset;# 前两个属性是必须写的。其余的可以省略。

属性值

2、示例

示例

	
盒子阴影

运行结果

你如果愿意有所作为,就必须有始有终。(15)

转载地址:http://bxffz.baihongyu.com/

你可能感兴趣的文章
MVC 区域功能
查看>>
MySQL FEDERATED 提示
查看>>
mysql generic安装_MySQL 5.6 Generic Binary安装与配置_MySQL
查看>>
Mysql group by
查看>>
MySQL I 有福啦,窗口函数大大提高了取数的效率!
查看>>
mysql id自动增长 初始值 Mysql重置auto_increment初始值
查看>>
MySQL in 太多过慢的 3 种解决方案
查看>>
MySQL InnoDB 三大文件日志,看完秒懂
查看>>
Mysql InnoDB 数据更新导致锁表
查看>>
Mysql Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql insert update 同时执行_MySQL进阶三板斧(三)看清“触发器 (Trigger)”的真实面目...
查看>>