padding、margin、border-radius：四个值时候的方向

最新推荐文章于 2024-04-16 18:09:40 发布
最新推荐文章于 2024-04-16 18:09:40 发布
阅读量5.8k 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiandaochouqin_1/article/details/87209236
版权

padding:  内边距

一个值：上下左右

两个值：上下    左右

三个值：上    左右     下

四个值：上   右    下   左

margin:  外边距

和padding方向相同

 

border-radius:2px 0px 0px 2px

左上   右上  右下  左下

tiandaochouqin_1
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 圆角属性 border-radius 用法
CyberPlayer的博客
02-27 2443
border-radius 属性定义元素角的半径。通过border-radius 属性，可以实现任何元素的“圆角”样式。 例如： border-radius 属性实际上是以下属性的简写属性： border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 指定每个角 border-radius属性可以接受一到四个值。规则如下： 四个值 .
演化策略matlab代码-docs:docs
05-19
border-radius:5px; box-shadow: 2px 2px 5px rgb(216, 216, 216); } /* .content{ width:1000px; margin: 0 auto; padding-top: 30px; } */ .markdown-section{ padding: 30px 30px 40px 30px !important; } </...
css设置内外边框距离
jzl328656798的博客
03-29 1万+
margin属性可以有一到四个值。/p&gt; margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px margin:25px 50px 75px; 上边距为25px 左右边距为50px 下边距为75px margin:25px 50px; 上下边距为25px 左右边距为50px margin:25px; 所有的4...
CSS基础：最详细 padding的 4 种用法解析
最新发布
u013179804的博客
04-16 2412
CSS 中的 padding 属性用于控制元素内容与其边框之间的距离，即元素内边距。它的主要作用是调整元素内部内容与边框之间上右下左的间距，以增加页面的美观性和布局灵活性。好，那我们一起来看看吧。
border-radius四个值的问题
weixin_30436101的博客
09-22 1万+
我们都知道border-radius后面如果是4个值的话，依次代表的是左上角、右上角、右下角、左下角。 但是这样写呢：border-radius:10px 20px 30px 40px/50px 40px 30px 20px;我就不知道是什么意思了，原来border-radius:10px/20px；是说圆的水平半径是10px，垂直半径是20px，这样子写出来的边框就不是一个圆形的了 那我们来...
padding,margin带一个、二个、三个、四个参数的不同含义
热门推荐
蜂鸟工作室的专栏
05-06 4万+
margin标记可以带一个、二个、三个、四个参数，各有不同的含义 margin: 20px;（上、下、左、右各20px。） margin: 20px 40px;（上、下20px；左、右40px。） margin: 20px 40px 60px;（上20px；左、右40px；下60px。） margin: 20px 40px 60px 80px;（上20p
剖析Margin和Padding属性中四个值的先后顺序及区别
01-03 535
Margin和Padding属性中四个值的先后顺序及区别 顺序为:上右下左,'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列的. 区别：margin和padding是隔开元素中最常用的两个属性，国内好像翻成填充和补白之类乱七八糟的东西吧，其实margin就是指元素边界外的距离，padding刚好相反...
css-to-js-object:实验性的
06-25
css 到 js 对象 实验性：将 css 转换为 JS 对象... border-radius : 7 px ; } . something . else { transform : translateZ ( 0 ); } # tag { margin : 10 px ; padding : 20 px ; color : green; } test-pilot {
styled-style:CSS模块，例如样式组件
05-17
风格的 CSS模块，例如样式... btn { border-radius : 3 px ; padding : 0.25 em 1 em ; margin : 0 1 em ; background : transparent; color : palevioletred; border : 2 px solid palevioletred;}. primary { backg
cssprettifier-userscript:格式和语法突出显示您打开CSS文件
05-26
cssprettifier-userscript 格式和语法突出显示您打开CSS文件。 用户就像跨浏览器的扩展一样，... border-radius : 4 px ;}. callout strong { font-weight : bold; color : # 000 ;}后. callout {margin : 15 px 0 ;
styled-props:简单的lib，可让您轻松设置样式化组件中的样式化道具
04-25
border radius: 3px; background: ${ props => props . primary && 'palevioletred' } color: ${ props => props . primary ? 'white' : 'palevioletred' } ` ; 现在您可以简单地写 < Button > Hello <...
padding,margin带一个、二个、三个、四个参数代表的含义
Kimser
06-11 2375
margin: 20px;（上、下、左、右各20px。） margin: 20px 40px;（上、下20px；左、右40px。） margin: 20px 40px 60px;（上20px；左、右40px；下60px。） margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。） 在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。 .
【CSS】padding属性的多值简写（1-4个值）
TalonZhang的博客
04-02 2186
padding:10px;：上下左右的值都为 10px padding:5px 10px;：上下 5px，左右 10px padding:5px 10px 15px;：上 5px，左右 10px，下 15px padding:5px 10px 15px 20px;：上 右 左 下（从上开始顺时针） ...
border-radius的八个值如何一一对应？
余百炼的博客
08-30 622
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
boder-radius四个值的问题，boder-radius超出四个值的问题
imkaifan的博客
02-13 3754
boder-radius四个值的问题，boder-radius超出四个值的问题
HTML border padding margin border-radius
Mostdanger的博客
07-23 273
3.1 边框 其他的border-width 还有border-style都是可以按这种方式进行设置 还可以统一简写成 border：1px solid red; 3.2 外边距 盒子和盒子之间的距离，margin 四个方向都可以设置，设置方式和边框一样 Margin妙用 网页居中对齐 左右的这个值使用auto,使得元素左右居中显示 3.3 padding 内边距 设置的是内容和边框之间的距离 Padding会撑大盒子的大小，要保持原样，可以自己计算新width的大小，减去padding的值 解决方
css样式中的border-radius属性
m0_65251054的博客
03-25 1万+
吃火鸡的馒头作者很棒
CSS padding 属性有1、2、3、4个值时内边距为多少？
microcosmv的博客
06-14 2438
padding 简写属性在一个声明中设置所有内边距属性。 例子 1padding:10px 5px 15px 20px;上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px Tips：只要记住是从上内边距开始，顺时针旋转，margin也一样。 例子 2padding:10px 5px 15px;上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px
.commodity-di .general, .draft_status { font-size: 14px; color: #e3ea07; margin-bottom: 10px; } .commodity-di .general { margin-bottom: 15px; } .commodity-di .pay_title { font-size: 14px; color: #10bdd8; border-radius: 10px; margin-top: -35px; margin-left: -1px; padding-bottom: 5px; } .commodity-di .pay_title span { background: linear-gradient(#15c6cf38, #0ab0e647); padding: 5px 30px 5px 30px; border-left: 1px dashed #15c8ca8f; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: none; } .commodity-di .pay-content { margin-top: 50px; border-left: 1px dashed #15c8ca8f; border-bottom: 1px dashed #15c8ca8f; border-right: 1px dashed #15c8ca8f; background: linear-gradient(#18cfc300, #97e2ef14); border-radius: 10px; border-top-left-radius: 0; } .commodity-di .pay_list { padding-left: 15px; padding-right: 15px; } 帮我用以上CSS做出一款渐渐显示的弹窗效果，并且要配合html
05-31
好的，下面是一个简单的渐显弹窗的样式和HTML代码： HTML代码： ``` <div class="modal-wrapper"> <div class="modal"> <div class="modal-header"> <h3>提示</h3> <button class="close-btn">×</button> </div> <div class="modal-body"> <p>这是一个渐显弹窗。</p> </div> <div class="modal-footer"> <button class="confirm-btn">确定</button> <button class="cancel-btn">取消</button> </div> </div> </div> ``` CSS代码： ``` /* 弹窗外层容器 */ .modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; display: none; } /* 弹窗容器 */ .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); opacity: 0; } /* 弹窗标题栏 */ .modal-header { padding: 10px; text-align: center; background-color: #f5f5f5; border-top-left-radius: 10px; border-top-right-radius: 10px; } /* 弹窗内容区域 */ .modal-body { padding: 20px; text-align: center; } /* 弹窗底部按钮区域 */ .modal-footer { padding: 10px; text-align: center; background-color: #f5f5f5; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* 确认按钮样式 */ .confirm-btn { background-color: #4caf50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; margin-right: 10px; } /* 取消按钮样式 */ .cancel-btn { background-color: #f44336; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; } /* 关闭按钮样式 */ .close-btn { position: absolute; top: 0; right: 0; font-size: 30px; color: #aaa; background-color: transparent; border: none; padding: 0 10px; outline: none; } /* 弹窗渐显动画 */ .modal.fade-in { animation: fade-in 0.5s forwards; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } ``` JavaScript代码： ``` // 获取弹窗元素 var modalWrapper = document.querySelector('.modal-wrapper'); var modal = document.querySelector('.modal'); // 弹窗渐显函数 function fadeInModal() { modal.classList.add('fade-in'); modalWrapper.style.display = 'block'; } // 弹窗关闭函数 function closeModal() { modal.classList.remove('fade-in'); modalWrapper.style.display = 'none'; } // 确认按钮点击事件处理函数 function handleConfirmClick() { console.log('点击了确认按钮'); closeModal(); } // 取消按钮点击事件处理函数 function handleCancelClick() { console.log('点击了取消按钮'); closeModal(); } // 关闭按钮点击事件处理函数 function handleCloseClick() { console.log('点击了关闭按钮'); closeModal(); } // 绑定点击事件 document.querySelector('.confirm-btn').addEventListener('click', handleConfirmClick); document.querySelector('.cancel-btn').addEventListener('click', handleCancelClick); document.querySelector('.close-btn').addEventListener('click', handleCloseClick); // 调用弹窗渐显函数 fadeInModal(); ``` 这是一个简单的渐显弹窗效果，你可以根据具体的需求进行自定义修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值