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

最新推荐文章于 2024-07-20 18:05:02 发布
最新推荐文章于 2024-07-20 18:05:02 发布
阅读量5.9k 收藏 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
关注
CSS 圆角属性 border-radius 用法
CyberPlayer的博客
02-27 2530
border-radius 属性定义元素角的半径。通过border-radius 属性，可以实现任何元素的“圆角”样式。 例如： border-radius 属性实际上是以下属性的简写属性： border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 指定每个角 border-radius属性可以接受一到四个值。规则如下： 四个值 .
border-radius画圆以及border绘制图形
qq_44087363的博客
11-16 4708
border-radius画圆以及border绘制图形 1. 利用border-radius绘制圆形类图形 border-radius是一个简写属性，它包含4个方向的属性设置 border-top-left-radius左上， border-top-right-radius右上 border-bottom-left-radius左下 border-bottom-right-radius右下 另外每个方向上的border-radius值由x/y方向上的半径决定，1个半径值则是正圆弧，2个半径值则是椭圆弧 4
css设置内外边框距离
jzl328656798的博客
03-29 1万+
margin属性可以有一到四个值。/p> 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 中border-radius 属性
最新发布
HWL5679的博客
07-20 654
虽然border-radius不能直接接受八个值作为其属性的一部分，但通过使用斜杠分隔的水平和垂直半径，可以为每个角提供两个值（总共八个值，但按对分组），以实现更复杂的圆角效果。
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
Padding参数对应，raduis参数对应。
dadwdDW的博客
10-27 488
Padding参数对应，raduis参数对应。
border-radius 你了解多少
weixin_49140057的博客
01-08 909
border-radius 你了解多少 在 border-radius 这个 CSS3 属性出现之前，我们要想在页面画个圆，务必借助图片来实现，出了这个 border-radius 属性之后，我们在页面中实现一个圆形是非常容易的。接下来我们仔细研究研究这个 border-radius，看看它还有那些黑魔法？ Border-radius 探究 通过 border-radius 轻而易举的可以划出一个圆。我们通过这样的一个小例子，开始探究 border-radius。 HTML: CSS: .demo { w
border-radius理解-边框棱角变圆
xuanmu
02-16 3970
一、border-radius使用 　　border-radius的数值有三种表示方法：px、%、em，对于border-radius的值的设置，我们常用的有三种写法： （1）仅设置一个值 第一种方法，应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，例如： #test1 { border: 3px ...
微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...
weixin_36116139的博客
08-04 1549
border-radius 圆角边框通用语法浏览器支持微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua 定义和用法border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。提示：该属性允许您为元素添加圆角边框！默认值： 0继承性： no版本： CSS3Jav...
盒子模型(border、margin、padding、box-sizing拯救布局、圆角边框、阴影)
Learn to value time
12-30 1145
什么是盒子模型？ （1）content：位于最中间，网页的主要显示内容。 （2）border：位于内边距外面，如果没有内边距就是包着内容的外框，它一般具有一定的厚度 （3）padding：位于边框内部的空隙，是内容和边距的距离。 （4）margin：位于边框外部空隙，边框外面周围的距离。 边框 1、边框的颜色border-color 属性 说明 示例 border-top-color 上边框颜色 border-top-color:#369; border-right-color 右边
剖析Margin和Padding属性中四个值的先后顺序及区别
01-03 564
Margin和Padding属性中四个值的先后顺序及区别 顺序为:上右下左,'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列的. 区别：margin和padding是隔开元素中最常用的两个属性，国内好像翻成填充和补白之类乱七八糟的东西吧，其实margin就是指元素边界外的距离，padding刚好相反...
padding,margin带一个、二个、三个、四个参数代表的含义
Kimser
06-11 2418
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 2264
padding:10px;：上下左右的值都为 10px padding:5px 10px;：上下 5px，左右 10px padding:5px 10px 15px;：上 5px，左右 10px，下 15px padding:5px 10px 15px 20px;：上 右 左 下（从上开始顺时针） ...
border-radius的八个值如何一一对应？
余百炼的博客
08-30 650
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
boder-radius四个值的问题，boder-radius超出四个值的问题
imkaifan的博客
02-13 3827
boder-radius四个值的问题，boder-radius超出四个值的问题
HTML border padding margin border-radius
Mostdanger的博客
07-23 312
3.1 边框 其他的border-width 还有border-style都是可以按这种方式进行设置 还可以统一简写成 border：1px solid red; 3.2 外边距 盒子和盒子之间的距离，margin 四个方向都可以设置，设置方式和边框一样 Margin妙用 网页居中对齐 左右的这个值使用auto,使得元素左右居中显示 3.3 padding 内边距 设置的是内容和边框之间的距离 Padding会撑大盒子的大小，要保持原样，可以自己计算新width的大小，减去padding的值 解决方
border-radius属性值参数详解
weixin_30808575的博客
02-14 658
border-radius是CSS3设置圆角的一个属性，其属性值得单位可以使用：em、px、百分比等等。但是，border-radius属性值得参数形式有好多种，那么具体都代表什么意思呢？下面以实际例子分析一下： 首先是最常见的一种形式，一个值：border-radius: 值； border-radius: 10px; 这段代码代表同时将元素的每个圆角的...
.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、付费专栏及课程。

余额充值