CSS3

圆角效果 border-radius

html

<div class="circle"></div>

css

.circle {    height: 100px;    width: 100px;    background: red;    border-radius: 5px 5px 5px 5px;  // 顺时针， 左上， 右上， 右下， 左下}

阴影效果 box-shadow

html

<div class="circle"></div>

css

.circle {    height: 100px;    width: 100px;    background: red;    box-shadow: 5px 6px 7px #000 inset;  // inset 是内联  5px 横坐标 6px 纵坐标 7px 模糊度}

渐变色彩 gradient

html

<div class="rule"></div>

css

.rule {    height: 10px;    background-image: linear-gradient(to left, #fff, #000, #fff, #000, #fff, #000); // to left 从左到右 白 黑 白 黑 白 黑}

文字省略

html

<div class="text">    <p>这个很不错哦， 这个很不错哦        这个很不错哦， 这个很不错哦        这个很不错哦， 这个很不错哦        这个很不错哦， 这个很不错哦        这个很不错哦， 这个很不错哦        这个很不错哦， 这个很不错哦    </p></div>

css

.text {    width: 200px;    border: solid 1px blue;    white-space: nowrap;  // 文字一行显示    overflow: hidden;  // 溢出内容隐藏    text-overflow: ellipsis;  // 溢出文字变为省略号}