[开发笔记] 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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。