css边框阴影
<style type="text/css">
.mydiv{
width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}
</style>
for ie:
direction 阴影角度 0°为从下往上 顺时针方向
strength 阴影段长度
-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;
第一个参数是x轴阴影段长度
第二个参数是y轴阴影段长度
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色
-moz-box-shadow: 2px 3px 10px #EBBD2C; -webkit-box-shadow: 2px 3px 10px #EBBD2C;box-shadow: 2px 3px 10px #EBBD2C
-webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
div代码:
<div class="mydiv">
123123213123
</div>
.shortcodestyle{margin:0px auto;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}
圆角边框阴影:
-webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit 是在Chrome浏览器中用的 一般是指 浏览器是webkit核心
0 0 5px rgba(40, 173, 243, 0.5);
box-shadow的四个参数
x-offset x 轴偏移 0
y-offset y轴偏移 0
blur 模糊值 5px
color of shadow 阴影颜色
rgba(40, 173, 243, 0.5);
RGB是说颜色,A是指透明度
红40, 绿173, 蓝243, 透明度50%
css边框阴影的更多相关文章
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- HTML CSS边框阴影的实现
一款用CSS控制背景图像平铺,从而实现区域边框阴影的效果,虽然用到了图片,但可贵之处是本代码不管你需要阴影的区域是多大,它都能自动适应,因些还是很值得收藏一下的,兼容所有的IE浏览器. <!DO ...
- 来看下css边框阴影怎么设置?这些方法掌握后工作更轻松
我们在网页设计中,通常会使用ps工具来达到图片或者边框阴影.立体等效果.但是如果一些基础效果都需要用p图来完成那就显得效率比较低了.其实可以使用CSS来设置边框阴影,下面本篇文章来给大家介绍一下. 在 ...
- css边框阴影问题
阴影落在下方:box-shadow: 0 3px 5px rgba(0, 0, 0, .2); 阴影落在四周:box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 0 ...
- “妄”眼欲穿-CSS之flex布局和边框阴影
妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...
- Html/CSS前端如何实现文字边框阴影
上次我们聊了<Html5前端如何实现文字阴影>,其实在开发中现在对于阴影效果的使用已经越来越广泛了,那么今天我们就来说一说用同样的手法实现边框阴影. 一.边框阴影box-shadow 边框 ...
- CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
- css设置边框阴影;box-shadow的使用
html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
随机推荐
- 烂泥:KVM虚拟机克隆
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章介绍了有关KVM虚拟机快照的创建与恢复,这篇文章我们来介绍有关KVM虚拟机克隆. KVM虚拟机的克隆,我们可以分以下几步: 1. 使用virt ...
- Linux shell basic3 dd wc comm chmod ls
Generating files of any size /dev/zerois a character special device, which infinitely returns the ze ...
- nopcommerce里面的@Html.Widget("home_page_top") 是什么?
很多朋友在修改模板的时候看到很多类似@Html.Widget("xxx")的东西,这里简单介绍一下流程: 比如@Html.Widget("home_page_top&qu ...
- 【读书笔记《Android游戏编程之从零开始》】15.游戏开发基础(剪切区域)
剪切区域也称为可视区域,是由画布进行设置的:它指的是在画布上设置一块区域,当画布一旦设置了可视区域,那么除此区域外,绘制的任何内容都将看不到:可视区域可以是圆形.矩形等等. 画布提供了三种设置可视区域 ...
- hdu 5862 Counting Intersections
传送门:hdu 5862 Counting Intersections 题意:对于平行于坐标轴的n条线段,求两两相交的线段对有多少个,包括十,T型 官方题解:由于数据限制,只有竖向与横向的线段才会产生 ...
- IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法
IIS关于“ 配置错误 不能在此路径中使用此配置节”的解决办法 原文链接:http://www.cnblogs.com/200325074/p/3679316.html 今天刚安装好IIS8.5, 我 ...
- js对Date对象的操作的问题(生成一个倒数7天的数组)
今天在论坛上看到这样一个问题如下: 问题描述: 使用JavaScript生成一个倒数7天的数组.比如今天是10月1号,生成的数组是["9月25号","9月26号" ...
- UVALive 6092 Catching Shade in Flatland --枚举+几何计算
题意:x=[-200,200],y=[-200,200]的平面,一天中太阳从不同角度射到长椅(原点(0,0))上,有一些树(用圆表示),问哪个时刻(分钟为单位)太阳光线与这些圆所交的弦长总和最长.太阳 ...
- Android外部SD卡的读取
package com.kevin.writeorreadfile1_1; import android.app.Activity; import android.bluetooth.le.ScanF ...
- Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理,当创建项目时可以省时省力很多. 操作步骤 1.在 E:\cocos2d-x-2.2.1\tools\project-creator 目录下创建 create_project. ...