Css属性：border边框，设置圆角，border-radius

border边框

1.CSS border 属性
2.CSS 圆角边框
制作圆形
效果图：

1.CSS border 属性

允许您指定元素边框的样式、宽度和颜色。
solid - 定义实线边框
dashed - 定义虚线边框

border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color

简写border: 2px solid red;

<!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>
</head><style>div{width: 300px;height: 300px;background-color: pink;border: 2px solid red;
}</style>
<body><div></div></body>
</html>

没加之前border: 2px solid red;

加了之后：

2.CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：
可设置圆角的所有四个 border-*-radius 属性。
上下的左右边框
加这个：

border-radius: 50px 50px 50px 50px;

效果图：

制作圆形

可以设置：
border-radius: 80%;（）
上下的左右边框，圆角为80%，元素宽度的80%，设置为100%，靠近圆形

<!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>
</head><style>div{width: 30px;height: 30px;background-color: pink;border: 2px solid red;/* border-radius: 50px 50px 50px 50px;*/border-radius: 80%;
}</style>
<body><div></div></body>
</html>

效果图：

Css属性：border边框，设置圆角，border-radius相关推荐

html盒模型中border的写法,CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc...
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
html表格怎么改圆角边框,Table元素设置圆角border
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? Table元素设置圆角border-radius 首先,我们先对border-collapse属性进行简单的了解. 有以 ...
[Web 前端] 010 css 常用的边框设置
css 常用边框属性概览参数释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式 solid 实线,dotted 点状线,das ...
html css 表格无边框设置,HTML + CSS表格，设置边界的麻烦
我正在尝试使用HTML表格在线制作Sudoku板并使用CSS进行格式设置.理想情况下,输出应该是这样的形象:HTML + CSS表格,设置边界的麻烦的问题是我无法正确设置边框.以下是单个3×3框的代 ...
CSS 属性 cursor 手势设置(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
【JavaScript编写计算工资小程序】【表格细边框设置】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验5】
以下为本人大一选修课<网页设计与网站开发>的实验作业题,均为本人原创,分享给大家.如有不足之处欢迎指出. 1.题目: 实验5.新建页面test5.html,利用JavaScript编写如下 ...
java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...
Element-UI学习之旅-Border边框及图标
你能获得什么? 如何设置Border边框,如何使用icon图标,了解到Element-ui字体和颜色的知识 Border 边框我们对边框进行统一规范,可用于按钮.卡片.弹窗等组件里. border主 ...
css給一个角加圆角,css圆角边框不起作用怎么办
css设置渐变边框设置圆角无效问题开门见山,当我们给一个元素的边框设置渐变色,那设置圆角就没有效果,以输入框为例:html: css: input{ outline: none; backgroun ...

Css属性：border边框，设置圆角，border-radius

border边框

1.CSS border 属性

2.CSS 圆角边框

制作圆形

效果图：

Css属性：border边框，设置圆角，border-radius相关推荐

最新文章

热门文章