CSS——圆角边框和阴影

圆角边框

<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{  width:400px; height:400px; border:10px solid #00d8ff; border-radius:400px 300px 200px 100px; 100px:左上，右下 20px:右上，左下*/ /* border-radius:400px 300px 200px 100px; /* 顺时针排序 400px:左上，300px：右上，200px：右下 100px：左下*/ } </style>
</bead>
<body>
<div></div>
</body>
</html>

效果图

圆和半圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{  width:400px; height:200px; border:10px solid #00d8ff; /*border-radius:400px; 圆形*/ border-radius:400px 400px 0 0; /*半圆形*/ } img{  border-radius:200px ; } </style>
</head>
<body>
<div></div>
<img src="images/4.jpg" alt="">
</body>
</html>

效果图

阴影

<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> #text{  width:200px; height:200px; border:10px solid #00d8ff; box-shadow:10px 10px 100px red ; margin:0 auto; /*居中*/ } img{  box-shadow:10px 10px 100px red ; border-radius:200px; } </style>
</bead>
<body>
<div style="width:1000px;height:200px;display:block; text-align:center;">  /*让图片居中*/
    <img src="images/4.jpg" alt="">
</div>

<div id="text"></div>
</body>
</html>

本文地址：https://blog.csdn.net/wpc2018/article/details/110232053

黄山市民网：https://www.huangshanshimin.com/

文章目录

CSS——圆角边框和阴影

圆角边框

圆和半圆

阴影

相关文章