MJ的博客

一、使尺寸具有关联性举例如下：button{    padding:6px 16px;    border:1px solid #446d88;    background:#58a linear-gradient(#77a0bb,#58a);    border-radius:4px;    box-shadow: 0 1px 5px gray;    color

方法：ul{    overflow: auto;    width: 10em;    height: 8em;    padding: .3em .5em;    border: 1px solid silver;/*用于挡住顶部滚动提示，并使用background-attachment: local，固定在顶部*/    background: linear-

方法：/*隐藏浏览器自带复选框*/input[type="checkbox"]{    position: absolute;/*设置可见范围*/    clip: rect(0,0,0,0);}input[type="checkbox"]+label::before{    content: "\a0";    display: inline-block;

方法：    border:10px solid transparent;/*导致按钮变大，通过background-clip修改*/        background-clip:padding-box;     border-shadow:0 0 0 1px rgba(0,0,0,.3) inset; 声明：以上方法参考《CSS揭秘》

一、等腰梯形 方法：#o{    width: 100px;    height: 25px;    padding: .5em 1em .35em;    position: relative;    color: #fff;}#o::before{    content: "";    position: absolute;    top:

一、单切角 方法：background: #58a;background: linear-gradient(-45deg,transparent 15px,#58a 0);二、双切角 方法：background: #58a;/*right设置切角放置在右下角*/background: linear-gradient(-45deg,transparent 15

一、正方形菱形 方法：HTML    CSS#picture{    width: 400px;    transform: rotate(45deg);    overflow: hidden;    height: 400px;}#picture img{    max-width: 100%;    transform: rot

一、平行四边形 方法一：2个HTMLHTML    Click meCSS.button{transform:skew(-45deg);}.button div{transform:skew(45deg);}方法二：伪元素HTMLClick meCSS.button::before{    content:’’;    positio

一、椭圆 border-radius: 50%/50%;分析：border-radius: width/height;二、半椭圆 border-radius: 100% 0 0 100%/50%;分析： 三、1/4椭圆 border-radius: 100% 0 0 0;分析： 声明：以上方法参考《CSS揭秘》

一、实现半透明边框方法：border:10px solid hsla(0,0%,100%,.5);background:#fff;background-clip:padding-box; 二、实现多重边框方法一：box-shadowbackground:yellowgreen;box-shadow:0 0 0 10px #655,0 0 0 15

媒体查询技术，实际上是CSS上设置断点，实现不同设备显示不同网页布局，但会增加CSS维护成本。    正确思路应该是媒体查询的断点不应该有具体设备觉得的，而是根据设计本身，也就是说网页自身应具有弹性布局，再此基础上应用少量的媒体查询，具体建议如下：    1、使用百分比长度代替固定长度，也可以使用相关单位vw/vh/vimn/vmax；    2、在较大分辨率下使用固定宽度时，建议使用

有时候人的眼睛会产生视觉错觉，就算精确的尺寸或定位看起来却不精确，对于网页，用户体验极其重要，应以视觉为准，而不是尺寸，因为使用的是用户，一切应以用户体验为准。举例如下：     此处设置相同内边距，但看起来内边距并不相同。解决方法：    减小顶部和底部的内边距，效果如下：

方法：#earth{    width: 800px;    height: 800px;    clear: both;    background:url("earth.png") center center no-repeat;    background-color:#ffbb33 ;    border-radius: 50%;    position: