设为首页收藏本站
联系我们切换到宽版

 找回密码
 立即注册
金黑网络»首页 › 源码编程区 › 前端教程 › html5教程 › day2-3，外边距合并现象，塌陷问题，行内行高 ...
返回列表 发新帖

day2-3，外边距合并现象，塌陷问题，行内行高

[复制链接]
admin 发表于 2025-5-18 15:54:14 | 显示全部楼层 |阅读模式
day2-3，外边距合并现象

1.jpg

2.jpg

1.jpg

1.jpg 3.jpg 2.jpg
  1. <title>行内元素的垂直内外边距</title>
  2.   <style>
  3.     span {
  4.       /*无法改变行内行高*/
  5.       margin: 50px;
  6.       padding: 20px;
  7.       /*行内元素的垂直用line-height*/
  8.       line-height: 100px;
  9.     }
  10.   </style>
复制代码
  1. <title>圆角-基本使用</title>
  2.   <style>
  3.     div {
  4.       margin: 50px auto;
  5.       width: 200px;
  6.       height: 200px;
  7.       background-color: orange;

  9.       /* border-radius: 20px; */

  11.       /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */

  13.       /* 四值：左上  右上  右下  左下 */
  14.       /* border-radius: 10px 20px 40px 80px; */

  16.       /* 三值：左上  右上+左下  右下 */
  17.       /* border-radius: 10px 40px 80px; */

  19.       /* 两值：左上+右下  右上+左下 */
  20.       border-radius: 10px 80px;
  21.     }
  22.   </style>
复制代码
  1. <title>圆角-特殊场景</title>
  2.   <style>
  3.     img {
  4.       width: 200px;
  5.       height: 200px;
  6.       /* border-radius: 100px; */
  7.       /* 最大值是50%。超过50%没有效果 */
  8.       border-radius: 50%;
  9.     }

  11.     div {
  12.       width: 200px;
  13.       height: 80px;
  14.       background-color: orange;
  15.       border-radius: 40px;
  16.     }
  17.   </style>
复制代码
  1. <title>盒子阴影</title>
  2.   <style>
  3.     div {
  4.       margin: 50px auto;
  5.       width: 200px;
  6.       height: 80px;
  7.       background-color: orange;
  8.       box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) inset;
  9.     }
  10.   </style>
复制代码

回复

举报

返回列表 发新帖

QQ|网站地图|Archiver|手机版|金黑网络 ( 粤ICP备2021124338号 )

网站建设，微信公众号小程序制作，商城系统开发，高端系统定制，app软件开发，智能物联网开发，直播带货系统等

Powered by Www.Jinhei.Cn

Copyright © 2013-2024 深圳市金黑网络技术有限公司 版权所有

快速回复 返回顶部 返回列表