<!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命令 2019.7.29

    系统命令 一. type   查看命令是内部命令还是内部命令 help   帮助 man   在线帮助 cd      切换目录 pwd    查看所在路径 stat     查看文件详细信息 ls  ...

  2. PokerNet-poker recognition: 基于人工神经网络的扑克识别 （5）

    结果解读 结果1 结果2 结果1 void computeBCValue(cv::Mat mat_img, std::vector<bbox_t> result_vec, std::vec ...

  3. [转]Redis实现缓存，你应该懂的哪些思路！

    场景一:类似于微博,实现关注和被关注功能. 思路: 对每个用户使用两个集合类型键,用来存储关注别人的用户和被该用户关注的用户.当用户A关注用户B的时候,执行两步操作: sadd user:A B sa ...

  4. [JZOJ6340] 【NOIP2019模拟2019.9.4】B

    题目 题目大意 给你个非负整数数列\(a\),每次等概率选择大于零的\(a_i\),使其减\(1\). 问\(a_1\)被减到\(0\)的时候期望经过多少次操作. 思考历程 对于这题的暴力做法,显然可 ...

  5. SQL Server Download

    { https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads }

  6. iserver中的服务数据迁移

    今天需要将iserver测试服务器上的空间数据服务(数据源是Oracle Plus)迁移到客户的正式服务器,原想需要很大的工作量,其实是这样简单: 一.保证客户的iserver环境都已安装正确.对于o ...

  7. vue导航条选中项样式

    html: <div id="app"> <div class="collection"> <a href="#!&qu ...

  8. 「APIO 2019」桥梁

    题目 三天终于把\(APIO\)做完了 这题还是比较厉害的,如果不知道这是个分块应该就自闭了 考虑一个非常妙的操作,按照操作分块 我们设一个闸值\(S\),把\(S\)个边权修改操作分成一块,把所有的 ...

  9. spring AOP 编程--AspectJ注解方式 （4）

    1. AOP 简介 AOP(Aspect-Oriented Programming, 面向切面编程): 是一种新的方法论, 是对传统 OOP(Object-Oriented Programming, ...

  10. Eclipse 连接MySql数据库总结

    Eclipse 连接MySql数据库总结 一.在MySql中创建数据库,并创建表,向表中插入数据 1.创建数据库 create database select_test 2.创建表 create ta ...