css3--圆角
使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。
一下分別給背景,邊框,圖片添加了圓角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3圓角</title> <style type="text/css">* {margin: 0;padding: 0;}div {width: 200px;height: 150px;line-height: 150px;text-align: center;margin: 20px auto;}.rcorners1 {border-radius: 25px;background: #8AC007;}.rcorners2 {border-radius: 25px;border: 2px solid #8Ac007;}.rcorners3 {border-radius: 25px;background: url(paper.gif) left top repeat;}</style> </head> <body><div class="rcorners1">帶背景的圓角</div><div class="rcorners2">帶邊框的圓角</div><div class="rcorners3">指定背景的圓角</div> </body> </html>效果如下：
如果你在 border-radius 屬性中只指定一個值，那么將生成 4 個 圓角。
但是，如果你要在四個角上一一指定，可以使用以下規則：
- 四個值:?第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
- 三個值:?第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
- 兩個值:?第一個值為左上角與右下角，第二個值為右上角與左下角
- 一個值：?四個圓角值相同
我們上面已經演示過一個值了,下面演示下四個值，三個值,兩個值,
四個值:
border-radius: 10px 30px 50px 70px;效果如下：
?
?三個值：
border-radius: 10px 40px 10px;效果如下：
l兩個值：
border-radius: 10px 80px;效果如下：
我們來畫一個圓吧,只要寬度高度相同 且四個角的大小 是寬度和高度的一半就是一個圓了
width: 200px; height: 200px; border-radius: 50%; background-color: #8AC007;?
轉載于:https://www.cnblogs.com/qjuly/p/9013344.html
總結
- 上一篇： node jsonwebtoken
- 下一篇： 数据结构-单链表进阶之快慢指针原理（快速