目录
suibi

css圆角边框怎么设置样式(设置边框为圆角样式的属性代码)


前言

之前在介绍css盒子模型的时候,大概讲过边框border,边框border是其中一个重要组成部分。本篇将具体介绍边框的属性, border 属性允许您指定元素边框的样式、宽度、颜色及圆角。

CSS 边框样式

border-style 边框样式有以下值:

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。
  • ridge - 定义 3D 脊线边框。
  • inset - 定义 3D inset 边框。
  • outset - 定义 3D outset 边框。
  • none - 定义无边框
  • hidden - 定义隐藏边框

border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。其中3D样式效果取决与边框颜色 border-color 值。

如下实例:

前端入门——css边框和圆角

CSS 边框宽度

border-width 属性指定四个边框的宽度。可以将宽度设置为特定大小(以 px、pt、cm、em 等),或者使用以下三个预定义值之一:thin、medium 或 thick。

如下示例:

前端入门——css边框和圆角

给不同边框设置宽度:

前端入门——css边框和圆角

CSS 边框颜色

border-color 属性用于设置四个边框的颜色,通过以下方式设置颜色:

  • name - 指定颜色名,比如 "red"
  • HEX - 指定十六进制值,比如 "#ff0000"
  • RGB - 指定 RGB 值,比如 "rgb(255,0,0)"
  • HSL - 指定 HSL 值,比如 "hsl(0, 100%, 50%)"
  • transparent - 完全透明

注意:如果未边框宽度为0时,即使设置了边框颜色也不会显示。

如下示例:

前端入门——css边框和圆角

也可分别给每个边框设置不同颜色:

前端入门——css边框和圆角

按不同方向边框单独设置样式、宽度、颜色

还可以按照上、右、下、左的顺序分别设置边框样式、宽度或颜色。如下示例:

前端入门——css边框和圆角

以上写法等同于以下简写法,不同之处就是上面的写法对元素边框样式更精细控制:

p {
  height:100px;
  /*边框样式*/
  border-style: dotted solid dotted solid;
  /*边框宽度*/
  border-width: 2px 5px 10px 20px;
  /*边框颜色*/
  border-color: red rgb(0,255,0) #ff00ff orange;
}

更精简的写法

只使用一个border: style、width、color;设置边框样式。

如下示例:

前端入门——css边框和圆角

这种写法,缺点就是四个边使用相同的样式、宽度、颜色,所以当要制作特殊的效果时候,就需要使用以上非简写方法。

边框圆角

border-radius 允许你设置元素的四个角的圆角大小。语法如下:

border-radius: 左上 右上 右下 左下;

这4个值定义了一个半径长度,分别表示水平和垂直方向的半径

前端入门——css边框和圆角

你可以设置一个值,也可以设置二个或三个。和之前学习padding、margin类似,没有设置的那个值会以它的对角的值为准。比如以下示例:

前端入门——css边框和圆角

以上都是圆形的角,水平和垂直方向半径相同,如果水平和垂直方向半径不一样,不就是椭圆了吗?

创建椭圆角,语法如下:

border-radius: 水平方向(左上 右上 右下 左下)/ 垂直方向(左上 右上 右下 左下);

可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。

如下示例:

前端入门——css边框和圆角

现在你会看到,如上图出现不规则边框,是不是很有意思,现在动手试试吧,探索其中的乐趣。

使用边框制作箭头

利用border 制作小三角,非常实用,当把宽度和高度设置为0,看到如下代码:

 border-width: 40px; 
  border-color: #F00 #0F0 #00F #0FF; 
  border-style: solid; 
  width: 0px; 
  height: 0px;
前端入门——css边框和圆角

此时我们只需要将左边、下边、右边的 border 颜色设置为透明就是我们要的三角形了,如下代码实现倒三角图形:

border-color: #F00 transparent transparent transparent;

效果:

前端入门——css边框和圆角

如果要其它方向的三角,同理设置不同方向的颜色为透明就可以了。

一般使用此方法用来制作气泡效果,非常实用,你不妨试试。

总结:

1、边框 border 样式、宽度、颜色。

2、边框简写方法及按方向分别设置。

3、边框圆角分以圆形半径和椭圆半径的角。

4、边框应用实例,制作三角形。

边框在网页中的应用非常广泛,比如按钮样式,气泡效果,三角形等等。

感谢关注,祝学习愉快。


写笔记

咨询

您的电子邮箱地址不会被公开。