左右边框阴影 ----上下边框阴影 --- 透明度

最新推荐文章于 2022-07-05 14:21:40 发布
最新推荐文章于 2022-07-05 14:21:40 发布
阅读量669 收藏
点赞数
文章标签： 移动开发 javascript ViewUI
原文链接：http://www.cnblogs.com/caicaicai/p/5243685.html
版权
  • >  
  • <html>  
  •   
  • <head>  
  • <meta content="text/html; charset=utf-8" http-equiv="Content-Type">  
  • <title>CSS3属性：box-shadow测试title>  
  • <script type="text/javascript" src="js/jquery.min.js">script>  
  • <script type="text/javascript" src="js/jquery.boxshadow.js">script>  
  • <style type="text/css">  
  • .box-shadow-1{  
  •   -webkit-box-shadow: 3px 3px 3px;  
  •   -moz-box-shadow: 3px 3px 3px;  
  •   box-shadow: 3px 3px 3px;  
  • }  
  • .box-shadow-2{  
  •   -webkit-box-shadow:0 0 10px #0CC;  
  •   -moz-box-shadow:0 0 10px #0CC;  
  •   box-shadow:0 0 10px #0CC;  
  • }  
  • .box-shadow-3{  
  •   -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  •   -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  •   box-shadow:0 0 10px rgba(0, 204, 204, .5);  
  • }  
  • .box-shadow-4{  
  •   -webkit-box-shadow:0 0 10px 15px #0CC;  
  •   -moz-box-shadow:0 0 10px 15px #0CC;  
  •   box-shadow:0 0 10px 15px #0CC;  
  • }  
  • .box-shadow-5{  
  •   -webkit-box-shadow:inset 0 0 10px #0CC;  
  •   -moz-box-shadow:inset 0 0 10px #0CC;  
  •   box-shadow:inset 0 0 10px #0CC;  
  • }  
  • .box-shadow-6{  
  •     box-shadow:-10px 0 10px red, /*左边阴影*/  
  •     10px 0 10px yellow, /*右边阴影*/  
  •     0 -10px 10px blue, /*顶部阴影*/  
  •     0 10px 10px green; /*底边阴影*/  
  • }  
  • .box-shadow-7{  
  •     box-shadow:0 0 10px 5px black,  
  •     0 0 10px 20px red;  
  • }  
  • .box-shadow-8{  
  •     box-shadow:0 0 10px 20px red,  
  •     0 0 10px 5px black;  
  • }  
  • .box-shadow-9{  
  •     box-shadow: 0 0 0 1px red;  
  • }  
  •   
  •   
  •   
  • .obj{  
  •     width:100px;  
  •     height:100px;  
  •     margin:50px auto;  
  •     background:#eee;      
  • }  
  • .outer{  
  •     width: 100px;  
  •     height: 100px;  
  •     border: 1px solid red;  
  • }  
  • .inner{  
  •     width: 60px;  
  •     height: 60px;  
  •     background-color: red;  
  •     -webkit-box-shadow: 50px 50px blue;  
  •     -moz-box-shadow: 50px 50px blue;  
  •     box-shadow: 50px 50px blue;  
  •   }  
  • style>  
  • head>  
  •   
  • <body>  
  •     <div class="obj box-shadow-1">div>  
  •     <div class="outer">  
  •         <div class="inner">div>  
  •     div>  
  •     <div class="obj  box-shadow-2" >div>  
  •     <div class="obj  box-shadow-3" >div>  
  •     <div class="obj  box-shadow-4" >div>  
  •     <div class="obj  box-shadow-5" >div>  
  •     <div class="obj  box-shadow-6" >div>  
  •     <div class="obj  box-shadow-7" >div>  
  •     <div class="obj  box-shadow-8" >div>  
  •     <div class="obj  box-shadow-9" >div>  
  •     <script type="text/javascript">  
  •         $(document).ready(function(){  
  •         if($.browser.msie) {  
  •           $('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow  
  •         }  
  •       });  
  •     script>  
  •   
  • body>  
  • html>  

转载于:https://www.cnblogs.com/caicaicai/p/5243685.html

weixin_34161029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何给边框添加阴影效果：box-shadow
wsyn的博客
07-13 4万+
css的box-shadow是用来添加边框阴影效果的。 属性值详解： 1、inset 可选值，默认阴影在盒子外 使用inset后，阴影在盒子内，即使指定边框或者透明边框，阴影依然存在。 2、 这是头两个 值，用来设置阴影偏移量。offset-x为设置阴影的水平位移，假如是负值，那么阴影在边框的左侧；offset-y设置阴影的垂直位移，假如是负值，那么阴影位于边
边框阴影 分别为左 右 下 上
zq_zhangqian的博客
08-11 721
.box_shadow{ -webkit-box-shadow:-3px 0 3px #EFECEC,3px 0 3px #EFECEC,0 -3px 3px #EFECEC,0 3px 3px #EFECEC;                       -moz-box-shadow:-3px 0 3px #EFECEC,3px 0 3px #EFECEC,0 -3px 3px #EFECE
边框阴影
qq_095的博客
09-04 425
边框阴影 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;drop-shadows&lt;/title&gt; &lt;style&gt; body
css添加边框阴影上、下、左、右详解
小傲哥哥的博客
03-09 4万+
box-shadow: 2px 2px 2px #E5E5E5, -1px -1px 1px #E5E5E5; // 给多个边框添加阴影效果
css设置下边框边框阴影_跨浏览器CSS框阴影
culuo8053的博客
07-31 3861
css设置下边框边框阴影Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them. For someone with no design talent, a...
css边框设置阴影样式
coldriversnow的专栏
07-05 532
css边框设置阴影样式
使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式
acxl0372的博客
03-22 1390
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so...
box-shadow上下左右四个边框设置阴影样式
花开富贵的博客
07-28 1万+
box-shadow上下左右四个边框设置阴影样式语法值 / 说明四个不同样式加点阴影实现效果比如这样的: 语法 box-shadow: h-shadow v-shadow blur spread color inset; 注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。 值 / 说明 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow
CSS3阴影 box-shadow的使用和技巧总结
热门推荐
freshlover的专栏
05-28 71万+
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩
CSS3下实现边框阴影效果（下）-翘边阴影效果
Simagle的专栏
07-01 5878
CSS3下的翘边阴影效果
css3 透明度、阴影，圆角,边框背景
大小都是愁的成长之路
03-14 1679
阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; text-shadow: X-Offset Y-Offset blur color;//文字阴影 X-offset(必须) 　　是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边； Y-offset(必须
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）
E的小小地方
08-03 3186
/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2..
在HTML中div的一边边框有阴影,css3-框阴影应出现在右侧边框内
weixin_30909805的博客
06-23 656
我正在尝试在右边界内实现盒形阴影,当前一切工作正常,除了阴影在右边界外显示.以下是我尝试过的js小提琴示例代码…http://jsfiddle.net/5y1guk6d/1/HTML：Page titleMenu ContentMain content areaCSS：.header {width: 100%;height: 40px;top: 0;color: white;}.header-ba...
图片阴影效果怎么设置html,css如何给图片加阴影？
weixin_35935279的博客
06-03 3930
css可以实现很多的图片效果，图片阴影效果就是其中之一，那么css如何给图片添加阴影效果？本篇文章就给大家介绍如何使用css给图片添加阴影，希望对你们有所助。方法1：设置box-shadow属性通过一个简单的代码示例来看看box-shadow属性的实现方法。css 图片阴影--box-shadow属性.demo{width: 400px;height: 300px;margin: 50px aut...
设置div底部边框阴影
qq_21090437的博客
09-14 3543
设置div底部边框阴影： div{ -webkit-box-shadow:0px 1px 1px #de1dde; -moz-box-shadow:0px 1px 1px #de1dde; box-shadow:0px 1px 1px #de1dde; } 其中，box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]。 ...
阴影边框，透明度等
weixin_30614109的博客
03-17 54
以下为本人总结兼容一切主流浏览器的边框阴影 css代码：<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#9090...
航天宏图PIE-Engine Studio：深入理解矢量操作
示例代码展示了如何加载数据并将其添加到地图上，通过`Map.addLayer`方法将FeatureCollection以红色边框（color:"ff0000ff"）且无填充（fillColor:"00000000"）的形式展示，命名为"hebei"层。 通过这些基本操作，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值