lihuaylh
- 浏览: 5163 次
- 性别:
- 来自: 上海
-
最新评论
文章列表
在网站中会用到图片，图片的大小也会影响网站的性能，给大家介绍一款图片压缩网站
https://tinypng.com/
阴影 box-shadow
box-shadow是向盒子添加阴影，可以添加一个或者多个。
语法：
box-shadow ：X轴偏移量 Y轴偏移量 [ 阴影模糊半径] [阴影扩展半径] [ 阴影颜色][投影方式]
X轴偏移量：必需，水平阴影的位置，允许为负值。
Y轴偏移量：必需，垂直阴影的位置，允许为负值。
阴影模糊半径：可选，模糊距离。
阴影扩展半径：可选，阴影的尺寸。
阴影的颜色：可选，阴影的颜色，省略默认为黑色。
投影方式：可选（设置inset为内阴影方式，如果省略为外阴影方式）
inset 可以写在参数的第一个或者最后一个，其他位置无效。
代码：
设置外 ...
圆角效果 border-radius
使用方法：
一、
border-radius：10px;//所有角都使用半径为10px的圆角
-webkit-border-radius:10px;//chrome，safari
-moz-border-radius:10px;//firefox
二、
border-radius:5px 4px 2px 1px;//四个半径值分别是左上角、右上角，右下角和左下角，是顺时针
三、
border-top-left-radius:10px; //左上角
border-top-right-radius:10px;//右上角
bo ...
css3 文字阴影效果
- 博客分类：
- css
<style type="text/css">
body{
background:#000;
}
h1 {
text-align:center;
color:#fff;
font-size:48px;
font-family: 'Fruktur', cursive;
text-shadow: 1px 1px 1px #ccc,
0 0 10px #fff,
0 0 20px #fff,
...
五角星评分效果及一键分享功能
- 博客分类：
- JS
两种方法：
1.每颗星 创建一个div，并且设置div的背景图片，鼠标滑过改变div的背景图片。
<div class="item" style="margin-top:100px; margin-left:100px;">
<div class="formItem first" style="background-position: 0px -555px;"></div>
<div class="form ...
通过div和ul标签实现可编辑下拉框，在谷歌浏览器中ul 中的标签不能左对齐，原因是谷歌浏览器设置ul 默认样式，左边会多出40px，解决方法就是在css 添加样式*{-webkit-margin-before:0px;-webkit-margin-after:0px;-webkit-padding-start:0px;text-shadow:0 0;margin: 0; padding:0;}
进度条的实现方法就是：通过js 动态的改变一个div的宽度。在本例中用到了css3的属性，进度条背景使用了渐变的效果。
<style type="text/css">
.progress{width:50%;margin:0 auto;text-align:center;}
.bgBar{width:100%;border:1px solid #bdbdbd;}
.bar{height:30px;text-align:left;width:0;
background: -webkit-gradient(linear, left top, left ...
HighCharts动态折线图
- 博客分类：
- JS
var chart; $(function() { Highcharts.setOptions({ global: { useUTC: false } }); chart = new Highcharts.Chart({ chart: { renderTo: 'container', //图表放置的容器，DIV defaultSeriesType: 'spline', / ...