常见的CSS样式

2020-06-08  本文已影响0人  优秀的收藏转载分享
// 文字下划波浪线
  .text{
      text-decoration-line:underline;
      text-decoration-style: wavy;
    }

// 下边框波浪线
    div {
        background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
        radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
        background-size: 20px 20px;background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
        }
// 表单,lable标签,左右对齐
// css
       ul li{
            width: 80px;
            list-style: none;
            text-align: justify;
            text-align-last: justify;
        }
        p{
            width: 580px;
            text-align: justify;
            text-align-last: right;
        }

// html
    <ul>
        <li>姓名</li>
        <li>联系方式</li>
        <li>email(邮件)</li>
    </ul>
    <p>
        语法:text-align-last: auto|left|right|center|justify|start|end|initial|inherit;

        text-align-last 属性规定如何对齐文本的最后一行。
        注意:text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。
    </p>
text_align.png

注意:li 这个标签要设置 list-style: none; 去掉默认属性,否则在IE浏览器中当只有一行的时候,会出现并没有左右两端对齐,而是类似右对齐的bug。。。

参考文章:使用text-align:justify,让内容两端对齐,兼容IE及主流浏览器的方法

上一篇下一篇

猜你喜欢

热点阅读