是否有可能形成一条波浪线？
Rya*_*axe 18 html javascript css jquery
如果我想制作一条水平线,我会这样做:
<style>
#line{
width:100px;
height:1px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
如果我想制作一条垂直线,我会这样做:
#line{
width:1px;
height:100px;
background-color:#000;
}
</style>
<body>
<div id="line"></div>
曲线比较复杂,但可以使用border-radius和包装元素:
<style>
.curve{
width:100px;
height:500px;
border:1px #000 solid;
border-radius:100%;
}
#wrapper{
overflow:hidden;
width:40px;
height:200px;
}
</style>
<body>
<div id="wrapper">
<div class="curve"></div>
</div>
</body>
但我甚至无法理解如何产生波浪线!这甚至是远程可能只使用css(和javascript,因为它似乎有必要能够更容易地生成它们).
注意:
正如预期的那样,给出你的答案,没有办法在单一的CSS中做到这一点... javascript和jquery 100%可以为你的答案... 没有图像可以使用
yee*_*erk 24
这个问题相当陈旧,但我找到了一种没有Javascript,重复CSS或图像的方法.
由于背景将重复,您可以使用线性渐变或径向渐变来制作重复的线条.
一些例子:http://jsbin.com/hotugu/3/edit？html,css,output
HTML:
.holder {
/* Clip edges, as some of the lines don't terminate nicely. */
overflow: hidden;
position: relative;
width: 200px;
height: 50px;
}
.ellipse {
position: absolute;
background: radial-gradient(ellipse, transparent, transparent 7px, black 7px, black 10px, transparent 11px);
background-size: 36px 40px;
width: 200px;
height: 20px;
}
.ellipse2 {
top: 20px;
left: 18px;
background-position: 0px -20px;
}CSS:
<div class="holder">
<div class="ellipse"></div>
<div class="ellipse ellipse2"></div>
</div>浏览器支持是可以的(http://caniuse.com/#feat=css-gradients),IE 10可能会工作,但是在不同浏览器中小规模的事情会发生故障.如果您希望它能够在非常小的尺度上工作,您可能希望以更大的比例制作线,然后将其缩小("transform:scale(x);").
它也应该非常快,线性渐变在GPU上以chrome渲染,因此它应该尽可能快.
编辑: 鉴于没有图像/数据uri的要求.
您还可以将一堆边界半径元素填充在一起,并禁用顶部/底部或左/右边缘.我将它概括为一个将它们附加到元素的函数.
Javascript,其中squigglecount是"squiggles"的数量.如果您愿意,可以将其推广到实际宽度.
function makeLine(id, squiggleCount)
{
var curve;
var lineEl = $(id);
for (var i = 0; i < squiggleCount ; i++)
{
curve = document.createElement('div');
curve.className = 'curve-1';
lineEl.append(curve);
curve = document.createElement('div');
curve.className = 'curve-2';
lineEl.append(curve);
}
}
CSS:
.curve-1,
.curve-2{
display: inline-block;
border: solid 1px #f00;
border-radius: 50px;
height: 20px;
width: 20px;
}
.curve-1{
border-bottom: none;
border-left: none;
border-right: none;
}
.curve-2{
border-top: none;
border-left: none;
border-right: none;
}
旧(带图片):
已经有了很多答案,但这是一个简单的方法来做一个垂直的波浪线,类似于劳森的答案.
基本上,你使用背景图像和一个波浪线的数据uri来做到这一点.我可能不会用它来做任何事情,但这是一个有趣的思考练习.有一堆数据uri生成器,您可以在线使用它们来更改自己的图像.
<div class="aux">Stuff</div>
<div class="line"></div>
<div class="aux">More Stuff</div>
.aux{
display: inline-block;
vertical-align: top;
}
.line{
display: inline-block;
height: 400px;
width: 10px;
background-image: url(...etc...)
}
纯CSS解决方案:
我们可以使用sin wave字符 '∿'字符然后
为...设置负值 letter-spacing
只是为了好玩,我们可以使用不同的角色来获得其他曲线:
div {
font-size: 50px;
font-family: verdana;
}
.tilde {
letter-spacing: -19px;
}
.ohm {
letter-spacing: -6px;
}
.ac {
letter-spacing: -25px;
}
.acd {
letter-spacing: -11px;
}
.curlyv {
letter-spacing: -12px;
}
.frown {
letter-spacing: -13px;
}<div class="acd">???????????????</div>
<div class="tilde">˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜</div>
<div class="curlyv">????????????????</div>
<div class="frown">?????????????????</div>
<div class="ac">?????????????????????</div>
<div class="ohm">??????????</div>如果您希望某些文本的下划线成为波浪线，可以使用以下 css：
span {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
}<span>Example text here</span>来源：https : //developer.mozilla.org/en/docs/Web/CSS/text-decoration-line#example
| 归档时间： |
|
| 查看次数： |
23618 次 |
| 最近记录： |