<!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. Linux tee命令使用详解分享

    tee命令主要被用来向standout(标准输出流,通常是命令执行窗口)输出的同时也将内容输出到文件,下面是tee的man 信息 read from standard input and write ...

  2. day28 import,from * import *,__name__

    Python之路,Day16 = Python基础16 一 module通常模块为一个文件,直接使用import来导入就好了.可以作为module的文件类型有".py"." ...

  3. HTML5能取代Android和iOS应用程序吗？

    大量新生移动设备的兴起,改变了互联网的未来.在技术的发展上,HTML5会取代App应用吗?或者说能够在多大程度上取代呢?在HTML5规范中,已经加入了相机.磁力罗盘.GPS信息的支持.很多新兴浏览器也 ...

  4. 第三方模块requests下载

    requests下载 英文网站 http://docs.python-requests.org/en/master/ 中文网站 http://docs.python-requests.org/zh_C ...

  5. 结合sessionStorage解决vuex页面刷新数据丢失的问题

    将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...

  6. Markdown使用语法

    一.标题 一级标题为#号后加空格再加标题内容 二级标题为两个 # 号后加空格再加标题内容 以此类推,支持六级标题 二.字体 1. 加粗 在需要加粗的文字两侧分别用两个 * 包起来 2.斜体 在需要倾斜 ...

  7. c#窗体开发

    奇: 常用控件的使用(期间参杂着VS快捷键/常用设置) 快捷键:引用命名空间:shift+alt+F10 断点:F9 调试:F5 逐句调试(每行代码一次跳转):F11 逐过程调试:F10 重构提取方法 ...

  8. printk函数打开和关闭消息

    在驱动开发的早期, printk 非常有助于调试和测试新代码. 当你正式发行驱动时, 换句 话说, 你应当去掉, 或者至少关闭, 这些打印语句. 不幸的是, 你很可能会发现, 就在你 认为你不再需要这 ...

  9. Linux 下 Nand Flash 调用关系

    Nand Flash 设备添加时数据结构包含关系 struct mtd_partition        partition_info[] --> struct s3c2410_nand_set ...

  10. (转)线程池 ExecutorService 详细介绍以及注意点区别

    线程池 ExecutorService 相信java开发都用到,这里做个简单笔记 一 Java通过Executors提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池 ...