linear-gradient常用实现效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了linear-gradient常用实现效果相关的知识，希望对你有一定的参考价值。
之前也研究过css3的这个属性，感觉没什么大用，一般的开发不会用到，毕竟调出来的渐变不专业，不如找一个好看的图片，其实很多时候还是有用的，偷来三个例子。
一、控制虚线
一般写虚线都用dashed，但有时候出来的效果并不是我们想要的，比如控制虚线间的间距，感觉力不从心啊。
用linear-gradient效果还是比较理想的。
<div class="dashed"></div> <style> .dashed { height: 1px; background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent); background-size: 10px 100%; } </style>
另外关于虚线，复制demo，可自己调。
demo
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>title</title> </head> <body> <div id="main"> <div id="body"> <div id="effect" class="part"> <h3>效果：</h3> <div class="show"> <div class="demo"> <h5>HTML代码：</h5> <pre name="code" class="DlHighlight html"><span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">class</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>dashed<span class="after">"</span></span><span class="paren xml-tagangle">></span><span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">></span></pre> <h5>CSS代码：</h5> <textarea id="cssCode" rows="6" cols="50"></textarea> <h5>效果预览：</h5> <div class="dashed"></div> <h5>参数控制：</h5> <p>选择实虚比例：<select id="ratio"> <option value="0.75">3:1</option> <option value="0.666667">2:1</option> <option value="0.6">3:2</option> <option value="0.5" selected="">1:1</option> <option value="0.3333333">1:2</option> </select></p> <p>选择虚线步幅(3-30)：<input type="range" id="width" min="3" max="30" step="1" value="4"></p> <p>选择虚线宽度(1-10)：<input type="range" id="height" min="1" max="10" step="1" value="1"></p> <p>选择虚线颜色：<input type="color" id="color" value="#00000"></p> </div> </div> </div> </div> </div> <style> .dashed { height: 2px; background: linear-gradient(to right, #ff8000, #ff8000 8px, transparent 8px, transparent); background-size: 16px 100%; } </style> <script> var eleRatio = document.getElementById(‘ratio‘); var eleWidth = document.getElementById(‘width‘); var eleHeight = document.getElementById(‘height‘); var eleColor = document.getElementById(‘color‘); var eleStyle = document.querySelector(‘style‘); var eleCode = document.getElementById(‘cssCode‘); var generate = function () { var divide = Math.round(eleWidth.value * eleRatio.value * 100) / 100; var css = ‘.dashed {\n‘ + ‘ height: ‘+ eleHeight.value +‘px;\n‘+ ‘ background: linear-gradient(to right, ‘+ eleColor.value +‘, ‘+ eleColor.value +‘ ‘+ divide +‘px, transparent ‘+ divide +‘px, transparent);\n‘+ ‘ background-size: ‘+ eleWidth.value +‘px 100%;\n‘+ ‘}‘; eleCode.value = css; eleStyle.innerHTML = css; }; generate(); // 事件 [eleRatio, eleWidth, eleHeight, eleColor].forEach(function (control) { control.addEventListener(‘change‘, generate); }); </script> </body> </html>
二、用linear-gradient实现气泡对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content">
<p class="talk">这是对话内容</p>
</div>
</body>
</html>
<style>
.content {
margin-left: 70px;
}
.talk {
display: inline-block;
max-width: 80%;
border: 1px solid #ddd;
border-radius: 3px;
padding: 6px 10px;
font-size: 14px;
background-color: #fff;
position: relative;
}
.talk::before {
content: ‘‘;
position: absolute;
width: 6px; height: 6px;
background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
background-size: 6px 1px, 1px 6px, 6px 6px;
transform: rotate(-45deg);
left: -4px; top: 13px;
}
</style>
三、用linear-gradient实现 加减号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
<input value="1" size="1">
<a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>
</body>
</html>
<style>
.btn {
display: inline-block;
background: #f0f0f0 no-repeat center;
border: 1px solid #d0d0d0;
width: 24px; height: 24px;
border-radius: 2px;
box-shadow: 0 1px rgba(100,100,100,.1);
color: #666;
transition: color .2s, background-color .2s;
}
.btn:active {
box-shadow: inset 0 1px rgba(100,100,100,.1);
}
.btn:hover {
background-color: #e9e9e9;
color: #333;
}
.btn-plus {
background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
background-size: 10px 2px, 2px 10px;
}
.btn-minus {
background-image: linear-gradient(to top, currentColor, currentColor);
background-size: 10px 2px;
}
</style>
@
以上是关于linear-gradient常用实现效果的主要内容，如果未能解决你的问题，请参考以下文章