css基础-7-圆角边框、盒子阴影和文字阴影

文章目录

  • 圆角边框
  • 盒子阴影
  • 文字阴影
  • 参考

圆角边框

CSS3中新增圆角边框可以设置带有弧度的形状

  • border-radius设置圆角边框,值为数值或者元素宽高百分比,需正方形
  • 设置方式
    • border-radius: 左上 右上 右下 左下:四个值从左上顺时针设置四角的弧度
    • border-radius: 左上/右下 右上/左下:两个值设置效果
    • border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius:单独设置4个角

css基础-7-圆角边框、盒子阴影和文字阴影_第1张图片

盒子阴影

  • box-shadow:设置盒子阴影效果
描述
h-shadow 水平位移距离(必需,相对盒子的左上角)
v-shadow 垂直位移距离(必需,相对盒子的左上角)
blur 阴影虚实程度,越大越虚
spread 阴影面积大小
color 阴影颜色,常rgba
inset 将默认外部阴影改成内部阴影)

css基础-7-圆角边框、盒子阴影和文字阴影_第2张图片

文字阴影

  • text-shadow:设置文字阴影效果
描述
h-shadow 水平位移距离(必需,相对盒子的左上角)
v-shadow 垂直位移距离(必需,相对盒子的左上角)
blur 阴影虚实程度,越大越虚
color 阴影面积大小,常用rgba

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        h1 {
            color: orange;
            font-size: 50px;
            text-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
    style>
head>

<body>
    <h1>
        SPACE X
    h1>
body>

html>

在这里插入图片描述

参考

黑马pink老师

你可能感兴趣的:(Web前端,css)