box-shadow

box-shadow

由 折月煮酒 提交于 2019-12-02 02:57:37
box-shadow 边框 box-shadow：v h blur spread color insert v表示横向偏移 h表示纵向偏移 blur 表示模糊值 来源： https://www.cnblogs.com/bluecaterpillar/p/11727486.html

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

由 天大地大妈咪最大 提交于 2019-12-01 21:01:36
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 outside the div . This is particularly a problem on touch devices where the finger sometimes doesn't hit

box-shadow for inline element

由 旧巷老猫 提交于 2019-12-01 11:18:55
问题 A multiline text is positioned on an image. The text should appear on a white background like taped. Each line of the text needs a small padding at the left and right side. This can be achieved with a box-shadow for the inline text. div.slide { background-color: black; height:200px; width:600px; } div.show { position:absolute; top:50px; left:50px; color:black; width:200px; } h3 { color:black; background-color:white; display:inline; -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;

js2048小游戏

由 穿精又带淫゛_ 提交于 2019-12-01 10:03:32
js2048小游戏，方格是怎么合并和移动的 index.html <html> <head> <meta charset="utf-8"> <title>2048小游戏</title> <meta name="renderer" content="webkit"> <!-- 360手机优先使用chrome内核 --> <meta name="screen-orientation" content="portrait"> <!-- UC强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="browsermode" content="application"> <!-- UC浏览器应用模式 --> <!-- <meta name="x5-page-mode" content="app"> --> <!-- QQ应用模式 --> <meta http-equiv="Cache-Control" content="no-siteapp"> <!-- 禁止百度转载页面加载流氓广告 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 优先使用最高IE内核和chrome内核 -->

HTML --盗版网页游戏

由 与世无争的帅哥 提交于 2019-12-01 05:08:47
<html lang="en"> <head> <meta charset="UTF-8"> <title>文强盗版游戏</title> <style type="text/css"> canvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767; } body { margin: 0; padding: 0; font-family:"Microsoft YaHei", "微软雅黑", "consolas"; background-image: url("image/54a1137bbeaa9.jpg"); background-attachment: fixed; } a { text-decoration:none; color:#000; } .navbar { background-color:#000; width:100%; height:50px; } .container { width: 1000px; margin: 0 auto; } .navbar .navbar-content-1 a { float: left; color: #FFF; line-height: 50px; display: inline-block;

CSS不同颜色按钮实例

由 前提是你 提交于 2019-12-01 04:52:32
CSS减少代码重复技巧非常多，以主要包含采用相对尺寸、半透明颜色的实例来说明CSS减少代码重复技巧的一些运用。 以下为通过CSS代码实现的一个“Yes!”按钮效果以及相应的代码： <span class='basisButton'> Yes! </span>　 与之组合的CSS代码： .basisButton { padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; }　　 #相对尺寸的使用 行高是字号的1.5倍，可以修改为： font-size: 20px; line-height: 1.5em; 字号也可以根据父元素字号修改为相对尺寸： font-size: 1.25em; /* 假设父级元素字号为16px*/ line-height: 1.5em;　 将pading、border-radius、box-shadow以及text-shadow值也根据字号为基准修改为相对尺寸：

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

由 跟風遠走 提交于 2019-11-30 16:44:56
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); } .circle { width: 100px; height: 100px; background-color: transparent; border: 2px solid red; /* red for

input 自动填充颜色改变或透明

由 本秂侑毒 提交于 2019-11-30 15:05:31
设置黄色背景变成白色背景：input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;} input:-webkit-autofill:focus { box-shadow: 0 0 0px 1000px white inset !important;} 设置透明：input:-internal-autofill-previewed,input:-internal-autofill-selected { -webkit-text-fill-color: #FFFFFF !important; transition: background-color 5000s ease-in-out 0s !important;}亲测有效 来源： https://www.cnblogs.com/chenfanga/p/11600251.html

兼容火狐浏览器，清除当type=number没有设置step时的红框线

由 元气小坏坏 提交于 2019-11-30 13:15:56
input[type="number"] { -moz-appearance: none !important; outline: none !important; -moz-outline: none !important; box-shadow: none !important; -moz-box-shadow: none !important; } -moz- 指的是火狐浏览器的私有属性 -webkit- 指的是safari谷歌浏览器的黑核 -ms- 指的是ie浏览器私有属性 这些是为了兼容老版本的写法，新版本的浏览器都支持直接写 来源： https://blog.csdn.net/qq_41046662/article/details/101441477

CSS3之box-shadow

由 跟風遠走 提交于 2019-11-30 12:08:49
语法： box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]; 用于在块级元素(如div)上投射阴影。 参数说明： 1、阴影的水平偏移量，正数表示阴影在框的右侧，负偏移量将阴影放在框的左侧。 2、阴影的垂直偏移，负数表示阴影在框的上方，正数表示阴影在框的下方。 3、模糊半径(可选)，如果将其设置为0，阴影将变得清晰，数字越大，模糊程度越大。 4、传播半径(可选)，正值增加阴影的大小，负值减小阴影的大小。 默认值为0(阴影与模糊大小相同)。于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 5、阴影颜色(可选)，默认颜色存在跨浏览器不兼容，目前chrome、firefox为黑色，safari为透明色。 6、设置为内阴影(可选)，没有设置则为外阴影。若设置，该关键词放置在语句开头或末尾均可。 .shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } 　　 内阴影 .shadow { -moz-box-shadow: inset
订阅 box-shadow