css3-边框 圆角 阴影 等属性

谁借莪1个温暖的怀抱¢ 2022-07-14 00:43 427阅读 0赞
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <!--------------------------------边框圆角--------------------------------->
  7. <!--/*默认上 下 左 右都是20*/-->
  8. <!--/*border-radius: 20px;*/-->
  9. <!--/*水平半径 垂直半径 right,left,top 等为盒子的倒角位置*/;-->
  10. <!--/*border-top-right-radius: 20px 100px;*/-->
  11. <!--/*border-top-left-radius:60px 120px;*/-->
  12. <!--/*border-top-right-radius:60px 120px;*/-->
  13. <!--/*border-bottom-left-radius:60px 120px;*/-->
  14. <!--/*border-bottom-right-radius:60px 120px;*/-->
  15. <!--/*复合属性*/-->
  16. <!--/* border-radius: 水平半径{1,4}/垂直半径{1,4} */-->
  17. <!--/*60px为水平半径 120px为垂直半径*/-->
  18. <!--/*border-radius: 60px/120px;*/-->
  19. <!--/*顺时针的赋值顺序,首先总左上 –>右上——》右下--》左下*/-->
  20. <!--/*border-radius:10px 10px 50px 200px;-->
  21. <!--/* 两个值时 ,-->
  22. <!--第一个值是 左上 和右下-->
  23. <!--第二值是: 右上和左下*/-->
  24. <!--/*三个值时*/-->
  25. <!--/*第一个值:左上*/-->
  26. <!--/*第二值:右上 和左下*/-->
  27. <!--/*第三个值: 右下*/-->
  28. <!--/*border-radius: 60px;*/-->
  29. <!--/*border-radius赋值顺序*/-->
  30. <!--/* 4个角的水平垂直半径都是120*/-->
  31. <!--/*border-radius: 120px; */-->
  32. <!--/* 两个值时 ,-->
  33. <!--第一个值是 左上 和右下-->
  34. <!--第二值是: 右上和左下*/-->
  35. <!--/*border-radius: 60px 120px;*/-->
  36. <!--/*三个值时*/-->
  37. <!--/*-->
  38. <!--第一个值:左上-->
  39. <!--第二值:右上 和左下-->
  40. <!--第三个值: 右下-->
  41. <!--}-->
  42. <!-------------------------------边框阴影---------------------------------------->
  43. <!--.box{-->
  44. <!--width: 200px;-->
  45. <!--height: 300px;-->
  46. <!--background-color: #fff;-->
  47. <!--margin:100px auto;-->
  48. <!--/* box-shadow: 水平位移 垂直位移 模糊程度 阴影的大小 阴影颜色 内阴影(inset)*/-->
  49. <!--/* 外阴影:outset 默认值不用写 */-->
  50. <!--box-shadow: 10px 10px 30px 1px red inset;-->
  51. <!--}-->
  52. </head>
  53. <body>
  54. </body>
  55. </html>

发表评论

表情:
评论列表 (有 0 条评论,427人围观)

还没有评论,来说两句吧...

相关阅读