[开发笔记] CSS篇

1- 设置字间距 实现文本两端对齐

• 效果
  
  效果图
• 实现CSS代码

 width: 100px;
 text-align: justify;
 text-justify: distribute-all-lines; /*ie6-8*/
 text-align-last: justify; /* ie9*/
 -moz-text-align-last: justify; /*ff*/
 -webkit-text-align-last: justify; /*chrome 20+*/

2- 使用background属性实现盒子仅四个角有边框的效果

• 效果
  
  效果图
• 实现CSS代码

.content {
    background: 
      linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat, 
      linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat, 
      linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right top no-repeat,
      linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right top no-repeat, 
      linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left bottom no-repeat,
      linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left bottom no-repeat,
      linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right bottom no-repeat,
      linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right bottom no-repeat;
      /*设置大小*/
    background-size: 0.15rem 0.6rem, 0.6rem 0.15rem, 0.15rem 0.6rem, 0.6rem 0.15rem;
}