圆形、半圆、三角形、扇形实现方法

最新推荐文章于 2023-12-22 13:49:55 发布

一条有梦想的咸鱼啊丶

最新推荐文章于 2023-12-22 13:49:55 发布

阅读量1.3k

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/li2406608527/article/details/108295711

版权

圆形

 <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 100px;
            }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>

宽高必须一致，设置盒子的border-radius 为长宽的一半或满值即可。

同时设置四个边的值为10px 的宽度

操作： border-width: 10px;

分别设置四个边的宽度为不同值

操作一：border-top-width: 10px; border-right-width: 20px; border-bottom-width: 30px; border-left-width: 40px;

操作二：border-width:10px 20px 30px 40px;

简写设置四个值是按照上右下左分别设置的三个值是上左右下两个是上下左右

如果不设置颜色默认颜色是黑色可以单独设置每一条边得颜色

border-top-color: red; border-right-color: yellow; border-bottom-color: blue; border-left-color: green;

同时设置四条边的颜色

border-color: red yellow blue green;

边框样式

            border-style: solid; 
            dotted 点状线 
            border-top-style: dotted;
            dashed 虚线 */
            border-right-style: dashed;
            double 双线 */
            border-bottom-style: double;
            常用值 solid  实线 */
            border-left-style: solid; 
            还有一些其他值，效果越炫酷，兼容性越差，不推荐使用太炫酷的属性值
            border-style: dotted dashed double solid;

半圆

<style>
            .box2{
            width: 200px;
            height: 100px;
            background-color: red;
            border-radius: 0px 0px 100px 100px;
        }
    </style>
</head>
<body>
    <div class="box2">
        
    </div>
</body>

设置一个长方形给最长边的左右两个圆角各设置个一半或者满值的圆角弧度和设置圆形同理只不过是设置两个角

扇形

<style>
            .box3{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 0px 0px 0px 200px;
        }
    </style>
</head>
<body>
    <div class="box3">
        
    </div>

宽高必须一致设置其中一个角的圆角弧度为宽高的值即可。

三角形

 <style>
            .box4{
            width: 0px;
            height: 0px;
            border: 40px red solid;
            border-color: red transparent transparent transparent;
        }
    </style>
</head>
<body>
    <div class="box4">
        
    </div>

设置一个盒子，给边框设置大一点，然后给其他三条边transparent属性（透明色）即可。