web制作圆角边框及字体引入

一、圆角边框

我们在使用百度浏览器搜索时，会发现搜索框是圆角框，见下图，这种效果我们怎么去实现呢，继续看下面，，

代码：

结果：

结果发现四个角的圆角效果都出来了，这就要介绍一个圆角属性：

border-radius：10px；属性值可以是数值，也可以是百分比，这个参数的含义是四个角的圆角程度，值越大圆角效果越明显，这个属性值代表的地方，见下面图示：

属性值代表的是四个角切出来多大的长度来连圆角。只有一个参数代表四个角都切除一样大小的角；当参数为两个值的时候，代表左上角和右下角为第一个参数的值，右上角和左下角为第二个参数；三个参数，分别为：左上、左下右上、右下；四个参数，分别是：从左上角开始，顺时针转。

当然我们也可以单独设置属性：

一定垂直方向上写在前面，第一个属性是左上角，垂直方向上的top要写在left前面才生效，，，

还有一种加"/"的写法，border-radius：30px/60px；代表的是在水平/垂直方向上的切割大小，四个角都是这样，但是这种写法只支持border-radius这种，不支持border-top-left-radius：单独方向上设置；如果想四个方向上水平和垂直方向的切割大小都不一样，可以像下图最后一句代码一样，先写四个方向上水平方向上的切割大小，再写垂直方向上的。

웃웃设置成圆形：

(1) 如果盒子是正方形的，想要将盒子设置成圆形就把圆角设置成50%即可，代码如下：

结果:

（2）如果盒子是长方形，我们不会设置百分比将它变成圆形，不好用，一般是设置px值，但是如果你想设置成圆形，就先将盒子设置成正方形就可以拉，，，

注意：input标签取消高亮选择属性：

input标签点击输入框四周会出现黑色的高亮选择，如果要清除使用上面的属性。。

二、圆角案例练习：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}input{outline: none;}div{width: 936px;height: 120px;background-color: #f6f6f6;margin: 10px auto;border: 1px solid #aaaaaa;border-radius: 16px;box-shadow: 1px 8px 7px #9e9e9e,-2px -2px 9px #9e9e9e;}[type=text]{width: 683px;height: 82px;border: 3px solid #cccccc;margin: 17px;border-radius: 3px;font-size: 25px;text-indent: 11px;}[type=submit]{width: 194px;height: 88px;background:url(./img/1.png);text-align: center;line-height: 84px;font-size :25px;color: white;border-radius: 5px;border: 3px solid #00748f;}</style>
</head>
<body><form action=""> <div><input type="text" placeholder="Search for CSS3,Html5,JQuery"><input type="submit" value="GO"></div></form>
</body>
</html>

结果：

三、字体引入

代码：首先要用@font-face{}引入字体，包括字体的名字和字体所在的链接，然后再使用字体

结果：