CSS3边框及盒子阴影

一、CSS3边框

1、border-radius    圆角边框

按照顺时针的顺序去设置 左上角，右上角，右下角，左下角 ，值越大，圆角越圆。

 ①设置一个值，四个圆角同时变化 

---

 ②设置两个值，第一个值为左上、右下圆角的值，第二个值为右上、左下圆角的值

（🔺 是对角关系）

---

③设置三个值，第一个值为左上圆角的值，第二个值为右上、左下圆角的值 ，第三个值为右下圆角的值

---

④设置四个值，按照左上、右上、右下、左下的顺时针顺序

---

⑤圆形

利用border-radius属性制作圆形的两个要点：

                ①元素的宽度和高度必须相同

                ②圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

---

二、盒子阴影

1、box-shadow： inset （outset ）  x-offset  y-offset  blur-radius   color

inset 阴影类型内阴影

outset 阴影类型外阴影 （🔺把inset删除 默认就是outset 外阴影模式）

x-offset X轴位移，指定阴影水平位移量

y-offset Y轴位移，用来指定阴影垂直位移量

blur-radius 阴影模糊半径阴影向外模糊的模糊范围

color 阴影颜色，定义绘制阴影时所使用的颜色

---

🔺 当X轴和Y轴的值为0时，设置blur-radius，那么会均匀出现模糊的内阴影或外阴影

---

三、表单验证

使用表单验证的好处主要有：

①减轻服务器的压力；②保证数据的可行性和安全性

在html中的input表单也提供一些初级的验证方法，主要有以下3种：

①placeholder属性 ②required属性 ③pattern属性

接下来就简单介绍下这三个属性如何使用！

1.placeholder属性

placeholder属性 是input 类型的文本框提供的一种提示，提示语默认显示，当文本框中输入内容时提示语消失 -->

它适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型。

---

 2、required属性

required属性 规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

---

3、pattern属性

pattern属性 指用户输入的内容必须符号正则表达式所指的规则，否则就不能提交表单