box-shadow | 易学教程

How to create a box shadow that is just an outline?

阅读更多关于 How to create a box shadow that is just an outline?

问题 How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this? Here's my curent code: HTML <img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg"> CSS .pageimg { width: 37%; float: right; margin-left: 100px; box-shadow: 10px 10px #FFE600; } 回答1: Use multiple box-shadows: img { box-shadow: 12px 8px 0 0px

Inset box-shadow beneath content scroll fix

阅读更多关于 Inset box-shadow beneath content scroll fix

问题 I found this solution Inset box-shadow beneath content which works just fine, but when the outer container div has to be scrolling (overflow), the inner div which has the box-shadow will scroll with the content. How to fix this? div { height:300px; color:red; position:relative; } div div { box-shadow:inset 0 0 10px black; position:absolute; top:0; left:0; width:100%; height:100%; } <div> <div></div> a </div> 回答1: you can consider adding an overlay and use z-index to specify which block is on

css hover效果

阅读更多关于 css hover效果

特效1： <div class="pulseicon"><span class="facts-ico establish-ico"></span></div> <style type="text/css"> ::placeholder{ opacity: 0.5 } .facts-ico{ display: inline-block; vertical-align: middle; width: 70px; height: 70px; border: 1px solid #ededed; background: #f8f8f8; border-radius: 50%; position: relative; } .pulseicon:hover .facts-ico{ animation: pulseicon 1.8s infinite } .facts-ico::before{ position: absolute; left: 0; bottom: 0; right: 0; margin: 0 auto; top: 0; width: 40px; height: 38px; content: ''; margin-right: 10px; vertical-align: middle; display: inline-block; margin: auto; } @

前端常用的CSS代码

阅读更多关于前端常用的CSS代码

（非原创）： demo演示 1、垂直居中对齐 .vc { position : absolute ; top : 50% ; left : 50% ; transform : translate ( -50%, -50% ) ; } .vc { position : absolute ; top : 50% ; left : 50% ; width : 100px ; height : 100px ; margin : -50px 0 -50px ; } ``````css 在这里插入代码片 2、全屏显示 html, body { position : fixed ; width : 100% ; height : 100% ; } div { height : 100% ; } 3、不同a标签链接使用不同样式 // link a [ href ^ = "http://" ] { background: url ( link . gif ) no-repeat center right ; } / / emails a [ href ^ = "mailto:" ] { background: url ( email . png ) no-repeat center right ; } / / pdfs a [ href$ = ".pdf" ] { background: url (

Inset box-shadow not following the curve

阅读更多关于 Inset box-shadow not following the curve

问题 ISSUE FIDDLE 1 This is the fiddle in question : Fiddle 1 #one { height: 200px; width: 200px; border-radius: 100% 0 0 0; background-color: plum; box-shadow: inset 40px 40px 0 0 red, inset 80px 80px 0 0 blue, inset 120px 120px 0 0 green; } <div id="one"></div> In this particular example, I have used 100% top-left border radius, and all other border radii are 0%, and height is equal width, producing a quadrant. Now I added 3 inset box-shadows to the main element with x,y offsets. I expect the

Seams in shadows between adjacent divs

阅读更多关于 Seams in shadows between adjacent divs

问题 Adjacent elements typically appear as if they were fused, with no lines or seams between them). Example: http://jsfiddle.net/4m3L79w4/1/ However, this does no longer appear to be the case if shadows are in use. Html: <div class="top"></div> <div class="bottom"></div> Css: DIV { background-color: #7faf7f; width: 400px; height: 50px; position: relative; box-shadow: 0px 5px 20px 5px #000000; } .top { z-index: 2; } .bottom { z-index: 2; } The "bottom" element projects shadow over the "top" one,

CSS box-shadow in jQuery .css()

阅读更多关于 CSS box-shadow in jQuery .css()

问题 Firefox 18 does not seem to recognize the -moz-box-shadow or the box-shadow CSS attribute. If I use border-color , everything works fine. $($this).hover( function () { //$(this).css('border-color', '#ff0'); $(this).css('box-shadow', '10px', '10px', '5px', '#888'); //$(this).css('-moz-box-shadow', '10px', '10px', '5px', '#888'); }, function () { $(this).css('border-color', ''); //$(this).css('border-width', ''); } ); What am I doing wrong? 回答1: You need to make the arguments into one string

CSS Shadows all four sides of div

阅读更多关于 CSS Shadows all four sides of div

问题 I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help! 回答1: As Ventus said is not possible to use css shadows with ie (only ie9). But you can use shadowOn. It's a great jquery plugin and very easy in use. With it you will have cross browser compatibility. 回答2: Box Shadow works in all mordern [IE>8]

Is it possible to include the box-shadow in the div area that responds to a click event?

阅读更多关于 Is it possible to include the box-shadow in the div area that responds to a click event?

问题 I have a div acting as a round button. It is styled so that a significant part of its overall appearance comes from a box-shadow : <body style="background:black"> <div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div> </body> I have a click event listener attached to the button div . Unfortunately, it doesn't respond if the div is clicked on the box-shadow as the box-shadow is rendered

less css框架的学习

阅读更多关于 less css框架的学习

什么是LESSCSS LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。语言特性快速预览：变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。 LESS源码： @color: #4D926F; #header { color: @color; } h2 { color: @color; } 编译后的CSS： #header { color: #4D926F; } h2 { color: #4D926F; } 混合（Mixins）混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。 LESS源码： .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: