关于如何用css使盒子的边框做成圆角的问题

要实现圆角的效果其实很简单，用一个radius属性就行了。话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><style type="text/css">.top{width: 100px;height: 100px;border: 1px solid #333;border-radius: 10px;/* 圆角的大小可以自己调 */}</style></head><body><div class="top"></div></body>
</html>

在浏览器打开：

就实现了这样的圆角效果。

而且我们还可以某一个角实现圆角效果，以下两段代码是等价的：

border-radius: 10px;

border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

如果你只想让边框的某一个角实现圆角效果的话，就只对那个角设置对应的属性就行了。

关于如何用css使盒子的边框做成圆角的问题相关推荐

在HTML中如何把块的边框做成圆角
adius,就是半径的意思.用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果.原理很简单,"正方形的内切圆的半径等于正方形边长的一半".下面就做一个红色的圆. 工具/原料 ...
CSS 之盒子模型——边框、内边距、外边距
使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定 ...
css 使盒子之间有间距两边对齐
1.使用margin 和 padding: 大盒子: margin-left :-10px; margin-right : -10px: 小盒子设置边距: 1) padding-left: 10px; ...
css给盒子添加边框线
上边框线 .border-top::before{content: "";position: absolute;height: 0.02rem;width: 100%;border ...
css使两个盒子并列_css如何去掉重叠部分的边框？
在前端开发中,边框border属性是经常会用到的一个属性,它可以给元素添加边框:但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起(如下图),那么如何去掉重叠部分的边框? web ...
CSS中使盒子移动方法总结
少BB,先总结: 外边距(margin) 定位(position) 2D移动(transform) 问题:如何将绿盒子向下移动200px? html代码 <body><div cla ...
css使两个盒子并列_盒子模型(重点)
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. 看透网页布局 ...
css使两个盒子并列_CSS常见面试题
阅读本文约需要9分钟大家好,我是小蔡,接下来开始今天的技术分享!上段时间跟大家分享了Vue 之响应式系统的知识,今天跟大家分享下CSS常见面试题的知识. 1 介绍一下标准的CSS的盒子模型?与低版本 ...
css使两个盒子并列_你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）...
(给前端大学加星标,提升前端技能.) 作者:深圳湾码农 https://juejin.im/post/5d8336d2f265da03df5f4a06 1.CSS盒模型,在不同浏览器的差异 css 标 ...

关于如何用css使盒子的边框做成圆角的问题

关于如何用css使盒子的边框做成圆角的问题相关推荐

最新文章

热门文章