代码编织梦想

1.画圆角

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 一个值是4个角 */
            border-radius: 10px;
            /* 三个值是对角 */
            border-radius: 10px 20px 40px;
            /* 二个值也是对角 */
            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>

在这里插入图片描述

2.画⚪

画一个正圆
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半border-radius50%

    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="one"></div>
</body>

在这里插入图片描述

3.画胶囊按


1.盒子要求是长方形
2.设置一border-radius:盒子高度的一半

    <style>
          .two{
            width: 400px;
            height: 100px;
            background-color: purple;
            border-radius: 50px;
          }
    </style>
</head>

<body>
    <div class="two"></div>
</body>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lxllxl211/article/details/128841571

html5中怎样写圆角,css圆角怎么写?-爱代码爱编程

很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要实现一些圆角效果,比如圆形的头像、圆角的 按钮等等。那么这些圆角效果是如何用css样式实现的? 想要使用CSS实现圆角效果,可以使用border-radius属性。它是就常见 ,也是最简单、快速设置圆角效果的属性。 border-radius(含义是"边框半径")

css圆角平滑,3种css 圆角 解决方案-爱代码爱编程

百度有啊css圆角方案 .box1{background:url('http://www.1079.com.cn/41/dome1/bg1.gif') repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;} .box1 .tl,.box1 .tr,.box1 .b

css給一个角加圆角,css圆角边框不起作用怎么办-爱代码爱编程

css设置渐变边框设置圆角无效问题 开门见山,当我们给一个元素的边框设置渐变色,那设置圆角就没有效果,以输入框为例:html: css: input{ outline: none; background: #fff; width: 700px; height: 50px; border:2px solid; border-image:

css 圆角_six6de6的博客-爱代码爱编程

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。 浏览器支持: 表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。     CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你可以

css圆角和阴影样式_抓香蕉鱼的博客-爱代码爱编程

一、其他样式 1、圆角边框 在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法: border-radius:length;