box-shadow | 易学教程

好看的鼠标hover效果

阅读更多关于好看的鼠标hover效果

0919自我总结常见的鼠标hover效果展示效果:http://ianlunn.github.io/Hover/ 部分动画制作 <style><!-- .container { margin: 0 auto; width: 800px; } .button { margin: .4em; padding: 1em; cursor: pointer; background: #ececec; text-decoration: none; color: #666; display: inline-block; } /* 2D TRANSFORMS */ /* Grow */ .grow { transition-duration: .3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow:hover { transform: scale(1.1); } /* Shrink */ .shrink { transition-duration: .3s; transition-property: transform; -webkit-tap

What is a good way to write CSS for multiple borders? [duplicate]

阅读更多关于 What is a good way to write CSS for multiple borders? [duplicate]

This question already has an answer here: How can I get multiple borders with rounded corners? CSS 8 answers I am trying to build multiple borders which are getting faded around the user image. I am writing the CSS like this, but this won't help: width: 90px; border-radius: 50%; box-shadow: inset 0 0 0 4px #eee, inset 0 0 0 8px #ddd, inset 0 0 0 12px #ccc, inset 0 0 0 16px #bbb, inset 0 0 0 20px #aaa, inset 0 0 0 20px #999, inset 0 0 0 20px #888; But it doesn't give the output as expected. How do I achieve this? Udhay Titus Use box-shadow with border-radius box-shadow: 0 0 0 10px #817dd1, 0 0

can you make a section of a div transparent and affect its box-shadow

阅读更多关于 can you make a section of a div transparent and affect its box-shadow

问题 I have managed to make a part of my div transparent by following this example: http://jsfiddle.net/5VDLX/144/ HTML (JSFIDDLE) <div class="container"> <div class="shape"></div> <div class="circle"></div> </div> CSS (JSFIDDLE) body{ background: yellow; } .shape { width: 500px; height: 75px; background-color: transparent; background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0); background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0); }

How to apply box-shadow on all four sides?

阅读更多关于 How to apply box-shadow on all four sides?

I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides: It's because of x and y offset. Try this: -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff; edit (year later..): Made the answer more cross-browser, as requested in comments :) btw: there are many css3 generator nowadays.. css3.me , css3maker , css3generator etc... See: http://jsfiddle.net/thirtydot/cMNX2/8/ input { -webkit-box-shadow: 0 0 5px 2px #fff; -moz-box-shadow: 0 0 5px 2px #fff; box-shadow: 0 0 5px 2px #fff; } This looks cool. -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999;

box-shadow 模糊半径与扩展半径

阅读更多关于 box-shadow 模糊半径与扩展半径

关于box-shadow的基本用法参阅 CSS3 box-shadow 一章节。此属性用来设置元素的阴影效果，语法结构如下: box-shadow:h-shadow v-shadow blur spread color inset; 下面通过代码实例介绍一下blur（模糊半径）和spread（扩展半径）参数的作用。一.模糊半径: blur参数规定模糊半径；W3C文档并没有具体规定使用哪种方式实现模糊功能。 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> .box{ margin: 40px 0; } .ant{ background:red; width: 100px; height: 100px; } .one{ box-shadow: 110px 0 0 green; } .two{ box-shadow: 110px 0 20px green; } .three{ box-shadow: 110px 0 40px green; } </style> </head> <body> <div class="box"> <div class="ant

纯css实现乌云密布的天气图标

阅读更多关于纯css实现乌云密布的天气图标

效果效果如下实现思路使用box-shadow属性画几个灰色的圆，将这些圆错落的组合在一起，形成乌云图案 after伪元素写乌云下的投影增加动画 dom结构用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写乌云的样式。 <div class="container"> <div class="cloudy"></div> </div> css样式 1、父容器样式，顺便给整个页面加一个背景色，方便预览 body{ background: rgba(73, 74, 95, 1); } .container{ width: 170px; height: 170px; position: relative; margin: 250px auto; } 2、乌云的样式，乌云有一个上下移动的动画。这儿关键是box-shadow属性的使用，白色的话就可以当作多云的天气图标啦~ .cloudy{ width: 50px; height: 50px; position: absolute; top: 70px; left: 80px; margin-left: -60px; background: #ccc; border-radius: 50%; box-shadow: #ccc 65px -10px 0 -5px, #ccc 25px -25px, #ccc 30px

给css边框设置阴影样式

阅读更多关于给css边框设置阴影样式

jquery实现漂亮的轮播图

阅读更多关于 jquery实现漂亮的轮播图

今天工作中要用到一个轮播功能，在网上找了一些，觉得有些过于繁琐，于是自己动手写了一个，效果如图：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <style> .oop_inner{ margin:0 auto; position:relative; top:10px; width:640px; height:424px; box-shadow:1px 2px 3px #666; overflow:hidden; } .oop_banner{ position:absolute; width:2600px; /* left:-640px; */ } .oop_banner img{ float:left; width:640px; } .oop_li{ position:absolute; left:45%; bottom:20px; } .oop_li span{ display:block; float:left; margin-right: 10px; width:15px; height:7px; background:#fff; box-shadow: 1px 1px; cursor:pointer; } .oop_li

css border 三角形阴影(不规则图形阴影) & 多重边框的制作

阅读更多关于 css border 三角形阴影(不规则图形阴影) & 多重边框的制作

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ border 的组合写法　　border：border-width border-style border-color; border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变；同理，outline | text-shadow | box-shadow 也不可以； border-style：边框样式，一般用 solid 多一点，dashed（虚线）、dotted（点状线）也有； border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，那就从父元素继承文本颜色；　　边框可以根据方向单独设置，上下左右，border-top | border-bottom | border-left | border-right ; 　　所以属性也可以单独设置，border-top-width | border-top-style | border-top-color ; 　　单属性也可以有组合写法： border-width:上右下左；（顺时针方向） border-width:上左右下； border-width:上下左右； border-width:四个方向； border-style | border-color也可以这样设置；　

CSS border系列

阅读更多关于 CSS border系列

本文更新版链接一、border 关于border的3个属性，分别为border-width、border-style、border-color。其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。关于 border-color transparent，据说特定情况下有奇效，需要知道有这样一个可选值。 white，白色的dotted边框，有时候会有奇效。比如：更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。 8种 border-style ：（只有记住了，才能在需要的时候合理使用。）关于 mixed border 利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。小tips：边框模拟，等高布局 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>边框模拟等高布局</title> 6 <style> 7 div.container { 8 margin-left: 200px; 9 overflow: hidden; 10 } 11 12 div.box {

订阅 box-shadow