CSS3边框

1.圆角边框

border-radius :用于指定圆角边框的圆角半径。

  • 如指定1个参数，则4个圆角都使用该长度作为半径。
  • 如指定2个参数，则第一个参数作为左上角和右下角的半径，第二个参数作为右上角和左下角的半径。
  • 如指定3个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。
<style>
	div{
            border:2px solid #a1a1a1;
            padding:10px 40px; 
            background:#dddddd;
            width:300px;
            border-radius:25px;
        }
</style>

<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>

2.边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

  • 第一个参数：控制阴影在水平方向的偏移。
  • 第二个参数：控制阴影在垂直方向的偏移。
  • 第三个参数：控制阴影的模糊程度。
  • 第四个参数：控制阴影的缩放程度。
  • 第五个参数：改属性值控制阴影的颜色。
<style> 
    div{
            width:300px;
            height:100px;
            background-color:yellow;
            box-shadow: 20px 10px 100px 100px #888888;
        }
    </style>
    </head>
    <body>
    	<div></div>
	</body>

内部阴影
{box-shadow:inset x-offset y-offset blur-radius spread-radius color}

对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}