目录
一,设置圆角
使用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
属性实现的。该属性允许我们为元素添加一个或多个阴影效果,可以控制阴影的颜色、位置、大小和模糊度等参数。
阴影效果可以为元素提供一种立体感,使其在页面中脱颖而出。通过巧妙地运用阴影效果,我们可以营造出按钮的按下效果、卡片的浮动效果或者图像的浮起效果等。阴影效果的使用可以增加用户界面的深度和视觉层次感,提升用户体验。
总的来说,设置圆角和设置阴影效果是前端开发中常用的技巧,用于改善界面的外观和提升用户体验。通过灵活运用这些样式技巧,我们可以创造出各种独特和吸引人的界面效果。然而,在使用这些样式技巧时,也需要注意不要过度使用,以免影响用户界面的可读性和可用性。