• 前端研习录（11）——CSS3新特性——圆角及阴影讲解及示例说明

    前端研习录（11）——CSS3新特性——圆角及阴影讲解及示例说明

    版权声明

    • 本文原创作者：清风不渡
    • 博客地址：https://blog.csdn.net/WXKKang

    一、CSS3新特性

      重拾前端记忆，记录学习笔记，现在进入CSS3新特性——圆角及阴影部分，下面进行说明

    二、圆角

      使用border-radius属性可以给任何元素增加“圆角”样式，有以下四种定义值的方式：

    一个值：四个角值相同
    两个值：第一个值为左上、右下角；第二个值为右上、左下角
    三个值：第一个值为左上角；第二个值为右上、左下角；第三个值为右下角
    四个值：第一个值为左上角；第二个值为右上角；第三个值为右下角；第四个值为左下角

      示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            border-radius: 30px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    style>
head>
<body>
    <div class="box1">div>
    <p>-----------------------------p>
    <div class="box2">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

      效果如下：
    在这里插入图片描述

    三、阴影

      通过box-shadow属性可设置元素的阴影样式，语法如下：

    box-shadow : h-shadow v-shadow blur color

    • h-shadow    必填，水平阴影位置（正值在右负值在左）
    • v-shadow    必填，垂直阴影位置（正值在下负值在上）
    • blur    非必填，模糊距离
    • color    非必填，阴影的颜色（默认黑色）

      举例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            border-radius: 20px;
            box-shadow: 5px 5px 2px gray;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    style>
head>
<body>
    <div class="box1">div>
    <p>-----------------------------p>
    <div class="box2">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

      效果如下：
    在这里插入图片描述

  • 相关阅读:
    1078. Bigram 分词
    Zabbix安装与部署
    网页排版和代码优化，求带我看看代码
    C++--day7
    【通过】华为机试真题12 - 仿LISP运算
    有一个项目管理软件，名字叫8Manage PM！
    深信服实验 | AF做透明部署时，如何对上网数据进行基本的上网管控和防护？
    HikariCP与Spring Boot的完美集成，让您的应用更高效、更可靠！
    解题元宇宙，网络游戏中的多元通信方案
    Auto-GPT测评：自信、努力、不合格
  • 原文地址：https://blog.csdn.net/WXKKang/article/details/126089810