border属性

border属性及其应用

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

  • border-width

1.可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
2.或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。

  • 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>

border属性_第1张图片

你可能感兴趣的:(css,css3)