<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            --高度: 200px;

            --宽度: 200px;

            --颜色: #b9c9fd;

            width: var(--高度);

            height: var(--宽度);

            border: 5px solid currentColor;

            color: var(--颜色);

            box-shadow: 0 0 20px 0 currentColor inset;

        }

    </style>

</head>

<body>

<div class="box"></div>

<!--

overflow:值 规定内容超过容器时的处理情况

visible(默认) 超出容器的内容可见

hidden 超出容器的内容不可见

scroll 不管内容有没有超过容器都有滚动条 -x或-y

auto 内容超过容器有滚动条，没有超过容器就没有滚动条

css中的小技巧

currentColor 寻找当前的字体颜色

css原生变量

    --颜色: #b9c9fd; 定义颜色为深蓝色

    var(--颜色) 使用变量这个颜色

opacity: ;不透明程度

-->

</body>

</html>

23-css补充的更多相关文章

  1. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  2. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  3. css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...

  4. [分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明 ）

    [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...

  5. HTML+CSS补充

    1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...

  6. 前端之CSS：CSS补充

    css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...

  7. 53、css补充

    css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...

  8. 5、css补充

    css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...

  9. 第五篇、css补充二

    一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...

  10. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

随机推荐

  1. MYSQL查询查找重复的电子邮箱

    编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. 示例: +----+---------+| Id | Email |+----+---------+| 1 | a@b.com | ...

  2. Dubbo的底层实现原理和机制

    –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 Dubbo缺省协议采用单一长连接和NIO异步通讯, 适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况

  3. CF773E Blog Post Rating

    题意:有一篇博客.一共有n个人,心中有他们期望该博客得到的赞数a[i].当某个时刻该博客的获赞数<a[i],则该人会使得赞数+1,当赞数>a[i],该人会使得赞数-1,当赞数=a[i],不 ...

  4. thinkphp5+GatewayWorker+Workerman

    项目地址  ttps://www.workerman.net/workerman-chat thinkphp5+GatewayWorker+Workerman聊天室,可以多人聊天,指定某个人进行聊天, ...

  5. 8-5接口测试用例设计与编写2 rest-assured

    rest-assured 简约的接口测试DSL 支持xml json的结构化解析 支持xpath jsonpath gpath等多种解析方式 对Spring的支持比较前面 底层是httpclient ...

  6. Windows dir

    显示目录中的文件和子目录列表. DIR [drive:][path][filename] [/A[[:]attributes]] [/B] [/C] [/D] [/L] [/N]  [/O[[:]so ...

  7. Servlet & Filter 执行原理

    一.Servlet的两个Map 当请求到达后,web容器是如何查找Servlet的呢?执行流程又是什么? 可能很多人和我一样,只知道在web,xml中配置拦截规则,然后反射+映射就完事了? 当Serv ...

  8. thinkphp ASSIGN标签

    ASSIGN标签用于在模板文件中赋值变量,用法如下: 直线电机厂家 <assign name="var" value="123" /> 在运行模板的 ...

  9. Ubunto 无法连接ssh客服端

    解决办法: (1)查看ip地址是否冲突 我在单位的虚拟机ip地址是192.168.14.85,与其它机器冲突了.改成了192.168.14.83   (2)关闭Ubuntu14.04的防火墙 root ...

  10. VS2010-MFC（MFC常用类：CTime类和CTimeSpan类）

    转自:http://www.jizhuomi.com/software/230.html 上一节讲了MFC常用类CString类的用法,本节继续讲另外两个MFC常用类-日期和时间类CTime类和CTi ...