2025年border属性

科技前沿 • 2025-03-11 07:05 • 阅读 35

大家好，我是讯享网，很高兴认识大家。

border属性及其应用

border 简写属性在一个声明设置所有的边框属性。
border: width style color
可以按顺序设置如下属性：

border-width

border-style

1.none: 默认无边框
2.dotted: 定义一个点线边框
3.dashed: 定义一个虚线边框
4.solid: 定义实线边框
5.double: 定义两个边框。两个边框的宽度和 border-width 的值相同
6.groove: 定义3D沟槽边框。效果取决于边框的颜色值
7.ridge: 定义3D脊边框。效果取决于边框的颜色值
8.inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
9.outset: 定义一个3D突出边框。效果取决于边框的颜色值

讯享网

border-color

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

应用border属性绘制三角形
原理：将边框设置足够宽就会显示三角形。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ 
      width: 0px; height: 0px; border-bottom: 100px solid green; border-top: 100px solid red; border-left: 100px solid #0000FF; border-right: 100px solid orangered; } p{ 
      width: 0px; height: 0px; border-bottom: 100px solid green; border-top: 100px solid red; border-left: 100px solid #0000FF; border-right: 100px solid orangered; border-color: red transparent transparent transparent; } </style> </head> <body> <div></div> <p></p> </body> </html>

讯享网

在这里插入图片描述

2025年border属性

border属性及其应用

相关推荐