小编Har*_*rry的帖子
这个CSS如何产生一个圆圈？
这是CSS:
div {
width: 0;
height: 0;
border: 180px solid red;
border-radius: 180px;
}
它如何产生下面的圆圈？
假设,如果矩形宽度为180像素,高度为180像素,那么它将如下所示:
应用border-radius 30像素后,它将显示如下:
矩形变得越来越小,也就是说,如果半径大小增加,矩形几乎会消失.
那么,180像素的边框如何height/width-> 0px变成半径为180像素的圆？
206
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
控制虚线边框行程长度和笔画之间的距离
是否可以控制CSS中虚线边框笔划之间的长度和距离？
以下示例在浏览器之间显示不同:
div {
border: dashed 4px #000;
padding: 20px;
display: inline-block;
}<div>I have a dashed border!</div>差异很大:IE 11/Firefox/Chrome
有没有什么方法可以更好地控制虚线边框的外观？
108
推荐指数
推荐指数
8
解决办法
解决办法
13万
查看次数
查看次数
形状有倾斜的一面(响应)
我试图创建一个如下图所示的形状,仅在一侧(例如,底侧)具有倾斜边缘,而其他边缘保持笔直.
我尝试使用border方法(代码如下),但我的形状的尺寸是动态的,因此我不能使用这种方法.
.shape {
position: relative;
height: 100px;
width: 200px;
background: tomato;
}
.shape:after {
position: absolute;
content: '';
height: 0px;
width: 0px;
left: 0px;
bottom: -100px;
border-width: 50px 100px;
border-style: solid;
border-color: tomato tomato transparent transparent;
}<div class="shape">
Some content
</div>我也尝试使用渐变作为背景(如下面的代码所示),但随着尺寸的变化,它会变得混乱.你可以通过悬停在下面代码片段中的形状来看到我的意思.
.gradient {
display: inline-block;
vertical-align: top;
height: 200px;
width: 100px;
margin: 10px;
color: beige;
transition: all 1s;
padding: 10px;
background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
width: 200px;
} …84
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
奇怪的渐变边框效果
当在具有linear-gradient背景的元素上应用透明边框时,我得到一个奇怪的效果.
请注意,元素的左侧和右侧没有正确的颜色(它们在某种程度上是切换的)并且非常平坦.
HTML
<div class="colors">
</div>
CSS
.colors {
width: 100px;
border: 10px solid rgba(0,0,0,0.2);
height: 50px;
background: linear-gradient(to right,
#78C5D6,
#459BA8,
#79C267,
#C5D647,
#F5D63D,
#F08B33,
#E868A2,
#BE61A5);
}
为什么是这样显示的元素的左侧和右侧的一个奇怪的效果,有什么我可以做些什么？
70
推荐指数
推荐指数
4
解决办法
解决办法
3598
查看次数
查看次数
创建闪电设计(如Flash)
我试图在CSS中重新制作闪电符号(DC Comics)(或Big Bang Theory的Sheldon Cooper 所穿的T恤).
这将像星级评级系统,只是一个"闪电评级系统".
但是,因为我试图将HTML保持在最低限度,所以我只想在CSS中设置这个样式.
我到了以下阶段:
html,
body {
margin: 0;
height: 100%;
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
height: 50vw;
width: 50vw;
position: relative;
margin: 0 auto;
}
.circ:hover{
background:gray;
}
.circ:hover .bolt{
background:gold;
}
.circ {
height: 50%;
width: 50%;
background: white;
border: 5px solid black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow:0 0 10px 2px black; …69
推荐指数
推荐指数
7
解决办法
解决办法
8131
查看次数
查看次数
jQuery等同于Prototype array.last()
原型:
var array = [1,2,3,4];
var lastEl = array.last();
在jQuery中有类似的东西吗？
64
推荐指数
推荐指数
4
解决办法
解决办法
12万
查看次数
查看次数
:最后一个孩子没有按预期工作？
问题在于CSS和HTML.这是一个带有示例代码的jsFiddle链接.
HTML
<ul>
<li class"complete">1</li>
<li class"complete">2</li>
<li>3</li>
<li>4</li>
</ul>
CSS
li.complete:last-child {
background-color:yellow;
}
li.complete:last-of-type {
background-color:yellow;
}
这些CSS行中是否应该使用"完整"类来定位最后一个li元素？
jQuery中的这个查询也没有以它为目标:
$("li.complete:last-child");
但是这个做了:
$("li.complete").last();
li {
background-color: green;
}
li.complete:first-child {
background-color: white;
}
li.complete:first-of-type {
background-color: red;
}
li.complete:last-of-type {
background-color: blue;
}
li.complete:last-child {
background-color: yellow;
}<ul>
<li class="complete">1</li>
<li class="complete">2</li>
<li>3</li>
<li>4</li>
</ul>64
推荐指数
推荐指数
3
解决办法
解决办法
9万
查看次数
查看次数
如何用随机锯齿获得撕裂的纸张效果？
我试图制作撕碎的纸张效果,如下图所示:
底部撕裂的效果.我看到了这个并且能够产生撕裂的纸张效果,如下所示
.box {
width: 300px;
height: 150px;
background: darkred;
position: relative;
display: inline-block;
}
.box:after {
position: absolute;
content: "";
width: 15px;
height: 15px;
transform: rotate(45deg);
transform-origin: 0% 100%;
background: darkred;
left: 0;
bottom: 0;
box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px -60px 0 0 darkred, 75px -75px 0 0 darkred, 90px -90px 0 0 darkred, 105px -105px 0 0 darkred, 120px -120px 0 0 darkred, 135px …44
推荐指数
推荐指数
3
解决办法
解决办法
6323
查看次数
查看次数
渐变文字颜色
是否有一个发电机,或者一个简单的方法来生成诸如文本这样,但不必定义每一封信
所以像这样:
.rainbow {
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}<span class="rainbow">Rainbow text</span>但不是彩虹色而是用其他颜色生成(例如白色到灰色/浅蓝色渐变等)我找不到一个简单的解决方案.有解决方案吗
40
推荐指数
推荐指数
3
解决办法
解决办法
11万
查看次数
查看次数
CSS渐变棋盘图案
我想用渐变创建一个棋盘图案.我找到了一个例子,并根据我的需要对其进行了修改,但它只适用于-moz前缀.当我删除-moz前缀时,模式完全不同.
如何使这个-moz棋盘图案无前缀地工作linear-gradient？
body {
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size:20px 20px;
background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}
28
推荐指数
推荐指数
5
解决办法
解决办法
2万
查看次数
查看次数