从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

时间：2021-12-06 21:20:09

大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

一、颜色模式

颜色模式有两种：

  • RGBA

rgba(0,0,0,0.5); //黑色，透明度0.5

  • HSLA（颜色(0360)，饱和度(0%100%)，明度(0%100%)，透明度(01)）

红橙黄绿青蓝紫红：颜色从 0~360 顺序，各占30度。比如红色为0，黄色为120，绿色为240。

HSLA(0, 100%, 50%, 1); // 红色不透明，饱和度100%，亮度50%

明度默认是50%,一般建议保留50的值，如果加到100后，变成白色，降到0后为黑色。

注意：

1、RGBA和HSLA中的透明度不会影响子元素的透明度，不具继承性；

2、opacity 会影响子元素的透明度，子元素会继承父元素的透明度。

3、transparent 不可调节透明度，始终完全透明。（color: transparent;）

二、文字阴影

语法：

/*阴影可以叠加，使用逗号隔开*/

text-shadow: offsetX offsetY blur color,

			 offsetX1 offsetY1 blur1 color1, ...

offsetX：X方向偏移度

offsetY：Y方向偏移度

blur：阴影的模糊度

color：阴影颜色

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .demo {

            width: 600px;

            padding: 30px;

            background-color: #666;

            margin: 20px auto;

            text-align: center;

            font: bold 80px/100% "微软雅黑";

            color: #fff;

        }

        /*添加阴影 text-shadow:offsetX offsetY blur color*/

        .demo1 {

            text-shadow: -5px -5px 5px orange;

        }

        .demo2 {

            color: #000;

            text-shadow: 0 1px 0 #fff;

        }

		/*立体浮雕效果*/

        .demo3 {

            text-shadow: -1px -1px 0 red,

              			-2px -2px 0 orange,

              			-3px -3px 0 yellow,

            			-4px -4px 0 green,

              			-5px -5px 0 cyan,

              			-6px -6px 0 blue,

              			-7px -7px 0 purple;

        }

        .demo4 {

            text-shadow: 0 0 30px pink;

        }

    </style>

</head>

<body>

    <div class="demo demo1">我是江小白</div>

    <div class="demo demo2">我是江小白</div>

    <div class="demo demo3">我是江小白</div>

    <div class="demo demo4">我是江小白</div>

</body>

</html>

从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

三、盒模型

1、在默认情况下，CSS 设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。例如：

  • padding + border + width = 盒子的宽度
  • padding + border + height = 盒子的高度

很明显，这不直观，很容易出错，造成网页中其它元素的错位。

2、CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

  • content-box：对象的实际宽度等于设置的 width 值和 border、padding 之和。（盒子实际的宽度 = 设置的 width + padding + border）
  • border-box： 对象的实际宽度就等于设置的width值，即使定义有 border 和 padding 也不会改变对象的实际宽度。（盒子实际的宽度 = 设置的 width），相应的盒子的内容的宽度或高度区间会变小。

3、浏览器的兼容性

IE8 及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀 -moz-，对于低版本的 IOS 和 Android 浏览器也需要加上 -webkit-

四、边框圆角

使用 border-radius 属性来设置圆角。

/*添加边框圆角*/

/*1.设置一个值：四个角的圆角值都一样*/

border-radius: 10px;

border-radius: 50%;

/*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/

border-radius: 10px 30px;

/*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/

border-radius: 10px 40px 60px;

/*4.设置四个值：左上  右上 右下 左下*/

border-radius: 10px 30px 60px 100px;

/*5.添加/是用来设置当前水平和垂直方向的半径值：水平x方向/垂直y方向*/

border-radius: 100px/50px;

/*6.添加某个角点的圆角*/

border-radius: 0px 50px 0px 0px;

/*或者：border-上下-左右-radius:*/

border-top-right-radius: 100px;

border-top-left-radius: 100px;*/

border-bottom-left-radius: 100px;

border-bottom-right-radius: 100px;

/*7.设置某个角点的两个方向上的不同圆角*/

border-top-right-radius: 100px 50px;  /*设置上偏移100px，右偏移50px样式的圆角*/

border-bottom-left-radius: 80px 40px; /*设置下偏移80px，左偏移40px样式的圆角*/

border-bottom-right-radius: 60px 30px;/*设置下偏移60px，右偏移30px样式的圆角*/

border-top-left-radius: 40px 20px;    /*设置上偏移40px，左偏移20px样式的圆角*/

/*8.如果想设置四个角点的不同方向上的不同圆角值*/

/*分别是水平方向的偏移：左上，右上，右下，左下 ，垂直方向的偏移：左上，右上，右下，左下*/

border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;

五、边框阴影

语法：

box-shadow:h v blur spread color inset

h：水平方向的偏移值（必填）

v：垂直方向的偏移值（必填）

blur：模糊度--可选，默认0 （必填）

spread：阴影的尺寸，扩展和收缩阴影的大小--可选 默认0

color：颜色--可选，默认黑色

inset：内阴影--可选,默认是外阴影

当然，box-shadow 和 text-shadow 一样，也是可以添加多个的，之间用逗号隔开。

box-shadow: 10px 10px 5px pink,

		   -10px -10px 5px pink; /*spread等不需要，省略不写*/

从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影的更多相关文章

  1. 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 CSS3（一）CSS3概述，选择器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 CSS3（三）渐变，background属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 CSS3（八）CSS3三个案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 CSS3（四）边框图片，过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 CSS3（六）动画animation，Web字体

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 CSS3（五）transform

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  9. 从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等

    大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...

随机推荐

  1. iOS通知中心升级 -可设置按优先级执行block

    简单介绍下,这是需求驱动中发现iOS的NotificationCenter有很多功能无法实现,于是对其进行了一层包装.相当于手动管理观察者栈和监听者期望执行的事件,因此可以为其添加了很多新增的功能,将 ...

  2. CSS基本知识2-CSS选择

    选择就是CSS定义的第一部分,可以用面向对象的模式来理解,或者声明式的面向对象. 标准选择: #.E 进阶选择:“,”分隔多个相同项,相当于类的实例. 如:#btn1,#btn2,.btn {...} ...

  3. HDU 4031 Attack（离线&plus;线段树）（The 36th ACM&sol;ICPC Asia Regional Chengdu Site —— Online Contest）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4031 Problem Description Today is the 10th Annual of ...

  4. 获取Class对象的方法及Class类型的一些讨论

    (1)Class.forName(className) (2)classname.Class 如果是数组,则是数组类型[].class (3)对象.getClass() 例: String path ...

  5. LCIS tyvj1071 DP优化

    思路: f[i][j]表示n1串第i个与n2串第j个且以j结尾的LCIS长度. 很好想的一个DP. 然后难点是优化.这道题也算是用到了DP优化的一个经典类型吧. 可以这样说,这类DP优化的起因是发现重 ...

  6. 751D&CenterDot;PARK北京时尚设计广场&lowbar;百度百科

    751D·PARK北京时尚设计广场_百度百科 751D·PARK北京时尚设计广场

  7. QT5&period;6 编译SQLServer驱动

    简要说下编译的主要步骤 @1:打开vs2015的命令行编译环境 ‘ @2:进入到cd到源码目录:cd C:\Qt\Qt5.6.0\5.6\Src\qtbase\src\plugins\sqldrive ...

  8. （五十九）iOS网络基础之UIWebView简易浏览器实现

    [UIWebView网络浏览器] 通过webView的loadRequest方法可以发送请求显示相应的网站,例如: NSURL *url = [NSURL URLWithString:@"h ...

  9. 【Qt编程】基于Qt的词典开发系列&lt&semi;三&gt&semi;--开始菜单的设计

    这篇文章讲讲如何实现开始菜单(或者称为主菜单)的设计.什么是开始菜单呢?我们拿常用的软件来用图例说明,大多数软件的开始菜单在左下角,如下图: 1.window 7的开始菜单 2.有道词典的主菜单 3. ...

  10. tkinter——GUI设计实操

    1.创建root: from tkinter import * root = Tk() root.title('GUI设计') # root.attributes("-alpha" ...

相关文章