box-shadow | 易学教程

谷歌浏览器默认样式的修改

阅读更多关于谷歌浏览器默认样式的修改

1.Chrome自动填充的input背景为黄色： box-shadow 向框添加阴影，默认是在框外面，inset改为向内添加。 box-shadow :H水平偏移量 V垂直偏移量 B模糊尺寸 S阴影尺寸 C阴影颜色 O/I内外影; 看阴影效果，先确定阴影尺寸，再确定偏移距离。 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 100px white inset !important; //不能为transparent的任意颜色，利用内部阴影遮住浏览器默认的黄色背景　　 box-shadow: 0 0 0px 100px white inset !important; } 2.input获得焦点时的蓝色边框　　利用元素的轮廓属性（不占长宽空间），outline: none;即可。来源： https://blog.csdn.net/qq_37555524/article/details/100807928

box shadows on multiple elements at same level but without overlap?

阅读更多关于 box shadows on multiple elements at same level but without overlap?

I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second). Is there a way to achieve the following? body { background: darkgrey; padding-top: 50px} div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px black; margin: auto; position: relative; } #box-one { left: -50px; z-index: 1; } #box-two { right: -50px; z-index: 1; } https://codepen.io/eoghanmurray/pen/oVEEVK If you can use filter and

border-radius实现圆弧阴影效果

阅读更多关于 border-radius实现圆弧阴影效果

1 原理利用border-radius实现一个圆弧边的矩形，并添加box-shadow，然后放在目标元素的下方 demo: html <div class="demo1"></div> css .demo1{ width: 500px; height: 200px; margin: 30px auto; position: relative; background-color: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; -o-box-shadow:0px 0px 3px rgba(0,0,0,0.3),0px 0px 3px rgba(0,0,0,0.2) inset; } .demo1:after,.demo1:before{ position: absolute; content: ''; top: 50%; bottom: 0px;

纯JS实现KeyboardNav(学习笔记)一

阅读更多关于纯JS实现KeyboardNav(学习笔记)一

纯JS实现KeyboardNav(学习笔记)一这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态数据结构的使用哈希,数组做出来导航页面实际上数组就是hash 数组带方括号其实是hash的一种简写. 且数组是对象. 报错学习 JS错误:没有被处理的语法错误 :不期待的字符串] 意思就是这里不应该有字符串] 语法错误 css重要代码 text-transform: uppercase; /*文本小写变大写*/ #mainxxxx{ display: inline-block; } main{ text-align: center; } /*mainxxx这个div居中*/ #mainxxxx>div:nth-child(2){ margin-left: 1em; } #mainxxxx>div:nth-child(2) 代表 mainxxxx 的名为 div 的第二个子元素. 定位 kbd 里面的 button ,并添加 hover kbd

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: 回答1: 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... 回答2: See: http://jsfiddle.net/thirtydot/cMNX2/8/ input { -webkit-box-shadow: 0 0 5px 2px #fff; -moz-box-shadow: 0 0 5px 2px #fff;

css 滚动条样式

阅读更多关于 css 滚动条样式

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3自定义滚动条-轩枫阁</title> <style> header { font-family: 'Lobster', cursive; text-align: center; font-size: 25px; } #info { font-size: 18px; color: #555; text-align: center; margin-bottom: 25px; } a{ color: #074E8C; } .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } .force-overflow { min-height: 450px; }

文本阴影和边框阴影

阅读更多关于文本阴影和边框阴影

文本阴影语法 text-shadow：h-shadow v-shadow blur color；在CSS3之前，除非使用图片，否则无法给文本添加阴影效果。现在，使用text-shadow属性，可以为文本添加一个或多个阴影及模糊效果。前两个0ffset必需添加，后两个clur，color可选! 不管是偏移，还是模糊，都不会改变元素本身的尺寸。因此，发生偏移、模糊后，阴影可能会超出元素本身，延伸到元素的边界之外。除了单阴影外，还可以使用逗号分隔的阴影列表，为文本设置多重阴影效果。通过多重阴影的叠加，可以实现很多有趣的效果。如，word中的空心文字、阳文、阴文这些文本特效，都可以通过多重阴影来实现。在文本的上、下、左、右四个方向各添加1px的黑色阴影，可以实现空心文字效果；在文本的左上和右下各添加 1px的错位补色阴影，可以实现阳文文字效果；把阳文的左上和右下的阴影颜色颠倒，即可实现阴文文字效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p{font-size:50px; color: white} .b1{text-shadow:-1px 0 #000, 0 1px red, 1px 0 blue,

吸引注意力的动画

阅读更多关于吸引注意力的动画

<p><strong>单击</strong> 按钮以激活其动画。</p> <div class='btn-container'> <button class='btn btn--shockwave is-active'> Shockwave </button> <button class='btn btn--jump'> Jump </button> <button class='btn btn--pulse'> Pulse </button> <button class='btn btn--blink'> Blink </button> <button class='btn btn--wiggle'> Wiggle </button> <button class='btn btn--wut'> Hatching Alien </button> </div> 　　 body { max-width: 600px; margin: 4.8rem auto; background: #acd4e4; font-family: tahoma, helvetica neue, helvetica, arial, sans-serif; background: linear-gradient(to right, #acd4e4, #bbe0df); text-align: center; }

纯css 制作简单的爱心

阅读更多关于纯css 制作简单的爱心

程序员的浪漫——一个简单的爱心情书网页制作效果图如下：代码如下： HTML: <div id="contain"> <div class="love"> <div class="right"></div> <div class="left"></div> </div> <p id="pmd"> <span>I</span> LOVE YOU</p> </div> CSS *{ margin:0 auto; padding:0 } #contain{ width: 900px; height: 600px; margin-top: 20px; box-sizing: border-box; box-shadow: 0 0 40px red ; position: relative; background-image: url(pic/s11.jpg) ; background-repeat:no-repeat; background-size: 100% 100%; background-position: -250px; } .love{ position: absolute; width:205px; height:250px; top:100px; left:350px; animation: love 1s infinite alternate; } @keyframes

box shadows on multiple elements at same level but without overlap?

阅读更多关于 box shadows on multiple elements at same level but without overlap?

问题 I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second). Is there a way to achieve the following? body { background: darkgrey; padding-top: 50px} div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px black; margin: auto; position: relative; } #box-one { left: -50px; z-index: 1; } #box

订阅 box-shadow