css奇技淫巧—box-shadow与outline绘制多重边框效果

css语法:

box-shadow: h-shadow v-shadow blur spread color inset;

注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

 

 

 

 

 

 

js语法:

object.style.boxShadow="10px 10px 5px #888888"

浏览器支持:

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

实例:

利用box-shadow绘制多重边框:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-shadowtitle>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            box-shadow:0 0 0 5px #000 inset,0 0 0 10px #f0f inset,0 0 0 20px #ff0 inset;
        }
    style>
head>
<body>
    <div class="div1">div>
body>
html>

css奇技淫巧—box-shadow与outline绘制多重边框效果_第1张图片

效果:http://sandbox.runjs.cn/show/rzwsnqrz

设置inset主要是为了两个div之前的间隔,避免边框(阴影)被挡住。并且所有的边框(阴影)都有圆角:

给div1加上:

border-radius:30px;

变成了这样:

css奇技淫巧—box-shadow与outline绘制多重边框效果_第2张图片

效果:http://sandbox.runjs.cn/show/dlbe8rod

还有一种绘制两重边框的效果(利用outline):

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>outlinetitle>
    <style type="text/css">
        .div1{
            width:100px;
            height:100px;
            margin:50px auto;
            border:5px solid #000;
            outline:10px solid #0f0;
        }
    style>
head>
<body>
    <div class="div1">div>
body>
html>

css奇技淫巧—box-shadow与outline绘制多重边框效果_第3张图片

效果:http://sandbox.runjs.cn/show/wfw5jdu5

这种方法只能绘制出两重边框,并且有个缺点:outline不能圆角!!,仅火狐支持:

-Moz-outline-radius:30px;

给div1加上属性:

border-radius:30px;

变成了这样:

css奇技淫巧—box-shadow与outline绘制多重边框效果_第4张图片

 效果:http://sandbox.runjs.cn/show/httheoha

 

转载于:https://www.cnblogs.com/qianduanjingying/p/5411362.html

你可能感兴趣的:(css奇技淫巧—box-shadow与outline绘制多重边框效果)