css随记01编辑技巧,背景与边框

代码优化

一个按钮的例子,使其值同比例变化;

button{
  color: white;
  background: #58a linear-gradient(#77a0bb, #58a);
  padding: 6px 16px;
  border-radius: 4px;
  //由padding+content构成，分别扩展
  border: 1px solid #446d88;
  font-size: 20px;
  line-height: 30px;
  //shadow: insert <x/y> <blur> <spread> <color>
  box-shadow: 0 1px 5px gray;
  text-shadow: 0 -1px 1px #335166;
}

• 让line-height随着font-size自动变化;
• 让font-size随着其继承的font-size变化而自动变化;

 font-size: 125%; /* Assuming a 16px parent font size */
 line-height: 1.5;

• 对于大多扩展的值，设置单位em，使其随着font-size等比变化
• 同时注意一些固定的值,仍使用px固定;

text-shadow: 0 -.05em .05em #335166;

padding: .3em .8em;
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
text-shadow: 0 -.05em .05em #335166;

• 按钮上设置了多种颜色,之后要修改或重用会变的比较麻烦;
• 为了使颜色更容易变化,把linear-gradient一种渐变色设置为背景同色，即transparent或者hsla(0,0%,100%,0);
• 将阴影颜色统一为 rgba(0,0,0,.5);

background: #58a linear-gradient(hsla(0,0%,100%,.2), hsla(0,0%,100%,0));

box-shadow: 0 .05em .25em rgba(0,0,0,.5);
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

• 重用这个按钮时，只要重新设置background-color;

一个缩写的例子

border-width: 10px 10px 10px 0;

• 有时候完全的缩写也不一定正确，对于只有单一值的改变更适用形式:

border-width: 10px;
border-left-width: 0;

不要忘记使用继承

• ingerit

对于自适应设计的一些建议

• 尽量使用百分比,如果不行的化使用viewport-relative units;
• 当设置固定数值的话，如宽度,设置max-width取代width`;
• 不要忘了给替代元素，如img, object, video, and iframe.设置百分值的max-width;
• 设置背景图时常添加background-size: cover使图片完全覆盖,但注意对移动设备带宽考虑,并不一定要完全显示整个大图;

背景和边框

制作半透明边框

• 颜色设置使用模糊效果的值hsl-> hsla, rgb-> rgba;
• 例子;

div {
   border: 10px solid hsla(0,0%,100%,.5);
   background: white;
   //默认是border-box,背景包括边框的模式;
   background-clip: padding-box;
}

制作多边外框

• 使用box-shadow,它可以设置多值,也受border-radius影响;
• 注意多值的宽度都是重复叠加的,需要叠加计算;
• 注意由于不是真正的边框,会与周边元素叠加,需要额外设置margin/padding,决定于阴影是否是insert;同时注意margin也是会叠加的;
• 注意他不能绑定一些事件，如果很重要，请设置为insert形式;
• 例子

div {
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655,
              0 0 0 15px deeppink;
}

• 使用outline,它不能设置多值，也不受border-radius影响;
• 也需要margin设置,只能out形式;
• 可以额外设置outline-offset;

div {
  background: yellowgreen;
  border: 10px solid #655;
  outline: 15px solid deeppink;
}

更好的设置背景图片位置

• 先用background总缩写大致确定图片状态与位置;再设置background-position做具体的调整;

background: url(http://csssecrets.io/images/code-pirate.svg)
	             no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

• 默认的布局下,background-position是基于padding-box;
• 对于移位值相同情况下,修改background-origin,使用padding替代;
• 例子

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
            bottom right; /* or 100% 100% */
background-origin: content-box;

• 使用calc()计算横纵坐标位移，它可以混合百分比和具体值计算;
• 例子
• 还可以用来剧中位置;

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

设置内部弧度外部直边的方框

• 可以同时设置border-radius和outline来呈现基本样式;
• 此时他们之间会产生空白部分,利用box-shadow填补;
• 取border-radius长度为r,outline长度为l,填补的长度范围应该在(1.414 - 1)r ～l 之间;
• 例子

outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */

设置条纹背景

• 使用线性渐变linear-gradient并将值一渐变开始位置比例设为50%；渐变比例为from到to的位置比,第一值to,第二值为from;
• 默认是repeat的，再设置background-size宽度和高度;
• 例子

background: linear-gradient(#fb3 50%, #58a 0);  //#fb3到.5位置结束,#58a从0位置开始;
background-size: 100% 30px;

• liner-gradient可以设置多值,两个为一对to,form后者会覆盖前者;

//设置三种颜色
background: linear-gradient(green 33.3%, red 0, red 66.6%, yellow 0);

• 改变linear-gradient的方向,设置to left|right|top|bottom或Ndeg的参数;

• 竖条纹的例子

background: linear-gradient(to right, /* or 90deg */
              #fb3 50%, #58a 0);

• 对于设置特定角度,如斜条纹,就只能设置Ndeg;同时设置background-size宽高相同;

• 例子1, 例子2

更复杂的背影样式

• css3, css3
• svg

设置边框图片背景

• 简单的方法利用两个div构建一个虚拟的图片边框;

.something-meaningful {
    background: url(stone-art.jpg);
    background-size: cover;
    padding: 1em;
}
.something-meaningful > div {
    background: white;
    padding: 1em;
}

• 在一个div设置两个背景层,渐变层和图片背景;用background-clip分别设置剪裁范围;
• 设置图片背景的范围;
• 例子

background: linear-gradient(white, white),
            url(http://csssecrets.io/images/stone-art.jpg);
background-clip: padding-box, border-box;
background-size: cover;
background-origin: border-box;

• 使用border-image: 例子
• 其他一些设置例子: 例子 例子
• 一个上边框显示部分的例子: 利用渐变的变化实现, 例子