css 深入理解
场景一、边框半透明,背景绿色
默认情况下背景会延伸到边框所在的下边
css2 中我们只能接受 css3 中我们可以通过 background-clip 属性来实现
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
场景二、 多重边框
box-shaow :投影方案 支持"," 分隔 多重投影
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
outline 方案
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
背景定位的扩展方案
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
css 深入理解的更多相关文章
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解之absolute(HTML/CSS)
absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- 关于DIV+CSS和XHTML+CSS的理解
WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...
- 转 - CSS深入理解vertical-align和line-height的基友关系
一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦 ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
- CSS深入理解之z-index
(http://www.imooc.com/learn/643) 一.z-index基础知识 1.z-index的含义 z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定当元 ...
- css深入理解padding
padding 中规中矩,性格温婉平和! 第一节:CSS padding与容器的尺寸——了解padding与元素尺寸之间关系 CSS padding与容器的尺寸关系复杂 对于block水平元素 没有p ...
随机推荐
- laravel在路由中设置中间件
//单个 路由 Route::get( 'admin/admin/index' , [ 'middleware' => 'old', 'uses' => 'Admin\AdminContr ...
- python面试题之简要描述Python的垃圾回收机制(garbage collection)
这里能说的很多.你应该提到下面几个主要的点: Python在内存中存储了每个对象的引用计数(reference count).如果计数值变成0,那么相应的对象就会小时,分配给该对象的内存就会释放出来用 ...
- shell数学运算
shell的数学运算 branches@ubuntu:~$ var1=$[ * ] branches@ubuntu:~$ echo $var1 branches@ubuntu:~$ var2=$[$v ...
- nginx的原理
Nginx会按需同时运行多个进程:一个主进程(master)和几个工作进程(worker),配置了缓存时还会有缓存加载器进程 (cache loader)和缓存管理器进程(cache manager) ...
- 2018-10-8-如何安装-btsync
title author date CreateTime categories 如何安装 btsync lindexi 2018-10-8 9:15:6 +0800 2018-2-13 17:23:3 ...
- nodejs包高效升级插件npm-check-updates
一.安装 npm install -g npm-check-updates 或 cnpm install -g npm-check-updates 二.使用 ncu crypto ^0.0.3 → ^ ...
- ios微信分享的兼容性问题
我微信分享采用的是: 页面初始化时动态加载js-sdk, 然后在需要分享的页面进行sdk的分享初始化 app.vue store.vue 这种方法在安卓上完全正常, 好用得令人发指, 但是!!! io ...
- Oracle修改数据文件路径
更改Oracle数据文件名及数据文件存放路径 SQL> select * from v$dbfile; FILE# NAME---------- ------------------- ...
- uploadify的使用错误
在看singwa的视频教程中,学习使用hui-admin模版,在使用uploadify插件上传图片中出现错误. ReferenceError: Can't find variable: $因为使用JQ ...
- IDEA的骚操作
1.var声明 "jack".var ==>final String name = "jack"; 2.null判空 user.null==>if( ...