css:修改盒子样式
圆角边框
在css3中新增了圆角边框样式，这样我们的盒子就可以长得奇形怪状了
像csdn上的发布就是圆角边框
还有这些
.x,
.y {
background-color: cornflowerblue;
width: 200px;
height: 200px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
10px是什么意思？
在四角画一个半径为10px的圆和矩形相切，切下来的结果就是外边框圆角
调整半径：
.x,
.y {
background-color: cornflowerblue;
width: 200px;
height: 200px;
margin: 0 auto;
text-align: center;
border-radius: 100px;//是方形边长的一半
}
我们也可以用百分比的方式来设置：
border-radius: 50%;50%的意思是宽度和高度的一半，等价于50%
如果想要椭圆就设置为50%
（孟德斯鸠（bushi））
想要两边为圆角就设置为高的一半
.x,
.y {
/* background-color: cornflowerblue; */
background-image: url(微信图片_20241113202301.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
border-radius: 150px;
}
给四个角设置不同的圆角也可以用到类似padding的写法：
border-radius: 50px 100px 150px 200px;
盒子阴影
像这种有种浮起的感觉，就是盒子阴影的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #222222
}
.box {
margin: 100px auto;
width: 300px;
height: 450px;
/* text-align: center; */
background-color: #f5f5f5;
border-radius: 10px;
}
.box .review {
font-size: 14px;
color: rgb(39, 34, 34);
padding: 0 20px;
margin-top: 10px;
}
.box img {
width: 100%;
border-radius: 10px;
}
.box .appraise {
font-size: 10px;
color: darkgray;
margin: 20px 20px;
}
.box div h3 {
display: inline-block;
font-size: 20px;
width: 200px;
margin: 10px 0px 0px 20px;
margin-top: 10px;
font-weight: 400;
}
.box div h3 a {
text-decoration: none;
color: black;
}
.box div span {
margin-top: 10px;
color: #ff6700;
margin-right: 20px;
}
.box div .dre {
margin-top: 10px;
color: darkgray;
font-style: normal;
/* margin: 0px 0px 0px 3px; */
}
.box:hover {
box-shadow: 0px 0px 10px 1px rgba(255, 204, 34, 0.5);//设置盒子阴影效果
border: 1px solid #ffcc22;
}
</style>
</head>
<body>
<div class="box">
<img src="微信图片_20241113155824.jpg" alt="菠萝吹雪">
<p class="review">这是一只死到临头还在犯贱的菠萝吹雪,也可能是一个补不完deadline的励志轩,也是一个知道周末要考概率论的荷叶饭</p>
<p class="appraise">来自XUPT的评价</p>
<div>
<h3><a href="#">荷叶饭尸块秒杀价...</a></h3>
<em class="dre">|</em>
<span>9.9元</span>
</div>
</div>
</body>
</html>
下面这行从左到右分别表示的是：
h-shadow：水平阴影的位置，允许负值（必须值）
v-shadow：垂直阴影的位置，允许负值（必须值）
blur：模糊距离（可选）
spread：阴影的尺寸（可选）
color：阴影的颜色（可选）
inset：将外部阴影(outset)改为内部阴影（可选）
盒子阴影不占用盒子的空间
box-shadow: 0px 0px 100px 10px rgba(255, 204, 34, 0.5) inset;//设置盒子阴影在内部的效果
泛黄的菠萝吹雪，阴影向内
outset是默认的，不能这么写
文字阴影
和盒子阴影差不多
h-shadow：水平阴影的位置，允许负值（必须值）
v-shadow：垂直阴影的位置，允许负值（必须值）
blur：模糊距离（可选）
color：阴影的颜色（可选）
text-shadow: 10px 10px 10px black;好恶心。。。
