目录

一,设置圆角

使用border-radius 设置圆角

本质

二,阴影设置

box-shadow 设置阴影

inset 设置内阴影

三,案例

1.使用圆角把盒子设置为圆/柠檬

2.使用阴影绘制太阳/月亮

四,总结


一,设置圆角

使用border-radius 设置圆角

border-radius:左上 右上 右下 左下;

左上!=右下 右上=左下

border-radius:左上 右上 右下 ;

左上=右下 右上=左下

border-radius:左上 右上;

左上=右下=右上=左下

border-radius:左上;

本质

实质上,每一个角的上面,都有一个水平半径和一个垂直半径,如果每一个方向上

的半径不同,则需要写成 水平半径/垂直半径

圆角的值也可以设置百分比,一般的制作一个圆可以直接设置50% (必须是正方形)

二,阴影设置

box-shadow 设置阴影

box-shadow:x方向偏移量 y方向的偏移量 阴影的发散度(模糊度)

阴影的宽度 阴影的颜色 阴影的位置(可以忽略)

inset 设置内阴影

box-shadow:10px 10px 20px 0 #ff0 inset;

设置多种阴影使用 , 英文逗号隔开,设置的方式一样

注意:在元素上设置阴影,通常是为了增强元素的立体感,给元素设置阴影

阴影不占据文档流空间,因此不会引起元素盒模型的变化

三,案例

1.使用圆角把盒子设置为圆/柠檬

圆角*{margin: 0;padding: 0;}.wp , .wp2 , .wp3{background-color: #04be02;width: 200px;height: 200px;border-radius: 50%;margin: 20px auto;overflow: hidden;}.wp2{ border-radius: 120px 20px; }.wp3{border-radius: 100px/30px 30px 60px 90px ;}img{width: 200px;height: 200px;} 

2.使用阴影绘制太阳/月亮

阴影*{margin: 0;padding: 0;}/* body{background-color: #000;} */.wp, .wp3 , .wp4{width: 200px;height: 200px;border: 1px #f00 solid;margin: 50px auto;box-shadow:10px 10px 10px 0px rgb(23, 211, 67) inset;}.wp2{width: 200px;height: 200px;background-color: #ff0;border-radius: 50%;margin: 0 auto;box-shadow: 0 0 50px 10px #f60 ;}.wp3{border-radius: 50%;border: none;box-shadow: 50px 50px 0px 0px rgb(0, 0, 0) inset;}.wp4{box-shadow:10px 0px 0px 0px #f00,-10px 0 0px 0px rgb(33, 7, 167),0 -10px 0 0 #ff0 , 0 10px 0 0 #04be02;}

四,总结

置圆角和设置阴影效果是前端开发中常用的样式技巧,用于美化和增强用户界面的效果。下面我将分别总结这两个方面的认识和看法:

设置圆角(border-radius):
设置圆角是通过CSS的border-radius属性实现的。该属性允许我们将元素的边框角设置为圆角形状,可以应用于各种HTML元素,如盒子模型、按钮、图片等。圆角的大小可以使用像素值、百分比或其他单位进行定义。

使用圆角可以给网页和应用程序带来更加柔和和现代化的外观。它可以为元素增添一种柔和的感觉,减少了尖角的严格感。圆角还可以用于创建卡片式布局和按钮,使界面看起来更加友好和吸引人。

设置阴影效果(box-shadow):
设置阴影效果是通过CSS的box-shadow属性实现的。该属性允许我们为元素添加一个或多个阴影效果,可以控制阴影的颜色、位置、大小和模糊度等参数。

阴影效果可以为元素提供一种立体感,使其在页面中脱颖而出。通过巧妙地运用阴影效果,我们可以营造出按钮的按下效果、卡片的浮动效果或者图像的浮起效果等。阴影效果的使用可以增加用户界面的深度和视觉层次感,提升用户体验。

总的来说,设置圆角和设置阴影效果是前端开发中常用的技巧,用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧,我们可以创造出各种独特和吸引人的界面效果。然而,在使用这些样式技巧时,也需要注意不要过度使用,以免影响用户界面的可读性和可用性。