border-radius 圆角矩形

来源:互联网 发布:sony vegas mac 编辑:程序博客网 时间:2024/06/01 13:40
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>div{width:100px;height:100px;border:1px solid red;margin:10px;float:left;text-align:center;}div:nth-of-type(1){border-radius:10px/10px;}div:nth-of-type(2){border-radius:15px;}div:nth-of-type(3){border-radius:15px 15px 0 0;}div:nth-of-type(4){border-radius:15px 0 15px 0;}div:nth-of-type(5){border-radius:5px 15px 0 15px;}div:nth-of-type(6){border-radius:50%;}div:nth-of-type(7){border-radius:50px;}img{border:3px solid #ccc;border-radius:50%;}div:nth-of-type(8){border-radius:50%;height:50px;}div:nth-of-type(9){border-radius:100px 100px 0 0;height:50px;}div:nth-of-type(10){border-radius:100px 0 0 0;}div:nth-of-type(11){border-radius:100px 0 0 0;height:50px;}div:nth-of-type(12){border-radius:100px 0 100px 0;}</style></head><body><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><img src="云课堂/image/10.jpg"/><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></body></html>

0 0
原创粉丝点击