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

最新推荐文章于 2024-10-07 16:29:52 发布

陌依依

最新推荐文章于 2024-10-07 16:29:52 发布

阅读量4.3k

点赞数 3

分类专栏： web前端开发文章标签：前端 html css css3 web

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127004224

版权

web前端开发专栏收录该内容

281 篇文章 18 订阅

订阅专栏

一、圆角边框

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

代码：

结果：

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

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>

结果：