css3 border-radius 圆角 box-shadow 阴影 border-image 边框图片

最新推荐文章于 2024-08-31 09:24:27 发布

滴滴咚咚咚

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量430

点赞数

本文链接：https://blog.csdn.net/darkcloudss/article/details/109327649

版权

border-radius 圆角

可以给图片设置圆角，也可以给元素设置圆角
写一个div 宽高设为100px

	<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>css3</title>
</head>

<style>
    .border{
        height:100px;
        width: 100px;
        border: 2px solid yellowgreen;
        border-radius: 50%;  /*圆角*/
    }
</style>
<body>
<div class="border"></div>
</body>
</html>

border-radius设为50%时该div是一个圆

border-radius: 50%;  /*圆角*/

在这里插入图片描述
也可以设置其他像素值
比如10px表示矩形的四个角弧度为10px,

border-radius: 10px;  /*圆角*/

在这里插入图片描述

分别表示上右下左四个角的弧度

border-radius: 10px 20px 8px 50px;  /*圆角*/

在这里插入图片描述

box-shadow 设置阴影

box-shadow: 10px 8px 5px #888888;

表示设置该div的阴影
分别表示 box-shadow: x偏移量 y轴偏移量阴影半径阴影颜色
在这里插入图片描述

border-image 边框图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>css3</title>
</head>

<style>
    .border{
        height:500px;
        width: 100px;
        border:40px solid;
        border-image:url(img.jpg) 100 100 100 round;
        text-align: center;
    }
</style>
<body>
<div class="border">你好呀</div>
</body>
</html>

border:40px solid;别忘了设置
border的大小决定边框图片展示的大小。
border-image:url(img.jpg) 100 100 100 round;
border-image：用在边框的图片的路径图片边框向内偏移图片边框的宽度边框图像区域超出边框的量图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)