[css]《css揭秘》学习(二)-多重边框
一、box-shadow属性
box-shadow除了生成投影,还可以用来生成边框;它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的;但是注意,投影的行为和边框的行为不同,投影不影响布局;“假”边框在元素外面,不影响元素的点击(可以给box-shadow属性加上inset元素,来投影到原色内部)。
<html> <head> <meta charset="utf-8"> <title>多重边框</title> <style type="text/css"> div{ width:100px; height:60px; margin:25px; background: yellowgreen; box-shadow: 0 0 0 10px #665, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,0.6); } </style> </head> <body> <div></div> </body> </html>
二、outline方案
outline属性可以给边框再加上一层边框,相比用box-shadow实现,好处是,可以给边框指定不同的类型,而不只是实线;缺点是,只能指定两层边框。
<html> <head> <meta charset="utf-8"> <title>outline实现双重边框</title> <style type="text/css"> div{ width:100px; height:60px; margin:25px; background: yellowgreen; border:10px solid #665; outline:5px solid deeppink; } </style> </head> <body> <div></div> </body> </html>
[css]《css揭秘》学习(二)-多重边框的更多相关文章
- CSS揭秘之《多重边框》
1.box-shadow还接受第四个参数(称作"扩张半径"), 通过指定正值或负值, 可以让投影面积加大或者减小2.如果我们想要一道实线边框其实也是可以通过box-shadow来模 ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- [css 揭秘]:CSS揭秘 技巧(二):多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- CSS揭秘—多重边框(二)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...
- CSS揭秘之多重边框&连续的图像边框
1.多重边框 我们可以通过使用border-image来写一个多重边框,或使用多个元素来模拟多重边框,不过我们有更好的办法来制作一个多重边框,那就是使用box-shadow的第四个参数(称为扩张半径) ...
- CSS揭秘-半透明边框与多重边框
场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为 解决方案: 使用backgroun ...
- CSS揭秘(二)背景与边框
Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...
- css border 三角形阴影(不规则图形阴影) & 多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...
- css多重边框
一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...
随机推荐
- [python]小练习__创建你自己的命令行 地址簿 程序
创建你自己的命令行 地址簿 程序. 在这个程序中,你可以添加.修改.删除和搜索你的联系人(朋友.家人和同事等等)以及它们的信息(诸如电子邮件地址和/或电话号码). 这些详细信息应该被保存下来以便以后提 ...
- 一、Hbase的安装
一.Hbase配置 这个是我从网上找的一个版本,网上说配置成功. 先决条件: (1)hadoop的版本与hbase的版本要对应,主要是hadoop目录下的hadoop-core-1.0.4.jar的版 ...
- AOP:代理实现方式①通过继承②通过接口
文件结构: 添加日志: package com.wangcf.manager; public class LogManager { public void add(){ System.out.prin ...
- 关于div宽度和高度的100%设定
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
- Mac下配置node.js环境(Mac 10.12)
有安装就有卸载,卸载教程参考:http://www.cnblogs.com/EasonJim/p/6287141.html 一.官方下载pkg安装包 1.安装 到官网https://nodejs.or ...
- 解决eclipse报PermGen space异常的问题
开发中遇到Eclipse报错:java.lang.OutOfMemoryError: PermGen space. 网搜到三种解决方法,最终还是第三种方法起了作用.记录日志,备用. 原文地址: htt ...
- md5-linux_shell
linux shell提供md5sum用于计算校验MD5值. md5sum - compute and check MD5 message digest md5sum [OPTION]... [FIL ...
- 关于浏览器和HTTP协议
关于浏览器 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示想要访问的网络资源.这里资源一般是指 HTML 文档,图片等其他的类型.资源的位置由用户使用 URL(统一资源标示符)指定. 而浏览 ...
- 基于 Python 和 Scikit-Learn 的机器学习介绍
Reference:http://mp.weixin.qq.com/s?src=3×tamp=1474985436&ver=1&signature=at24GKibw ...
- HNU 13081 Even Up Solitaire解题报告
题目大意:给定一个数组,若相邻的两个数之和为偶数,则将此两个数移除,通过这种方法将满足条件得数移除后数组还剩多少个数. 此题太水,不做解释.直接代码之: #include <stdio.h> ...