2020-11-4 圆角矩形/定位小结/css高级技巧

最新推荐文章于 2023-02-21 19:11:08 发布

夜吟东方独自醉

最新推荐文章于 2023-02-21 19:11:08 发布

阅读量310

点赞数

分类专栏：前端笔记HTML/CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46200509/article/details/109485661

版权

本文总结了CSS中的圆角矩形创建，包括相同和不同圆角的实现方法。同时，详细阐述了定位技术，包括相对定位、绝对定位和固定定位的特性及其应用场景。此外，探讨了CSS高级技巧，如元素的显示与隐藏、用户界面样式、轮廓线、垂直居中、溢出处理、精灵技术和滑动门等实用技术。

摘要由CSDN通过智能技术生成

一.圆角矩形
1.

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
简写

，如果4个角数值相同：

border-radius:15px;

如果四个角数值不同：

border-radius:左上角 右上角 右下角 左下角；

二.定位小结
相对定位（relative）–不脱标，占位置–相对自身位置移动–不能转换为行内块–单独使用
绝对定位（absolute）–完全脱标，不占位置–相对定位父级移动位置–能转换为行内块–要和父级元素搭配使用
固定定位（fixed）–完全脱标，不占有位置–相对浏览器移动位置–能转换为行内块–单独使用

三.css高级技巧
1.元素的显示与隐藏

display:none;

隐藏对象
隐藏后，不再保留位置

display:block;

显示对象

2.visibility的显示与隐藏
隐藏对象后，保留位置

visibility:inherit(继承上一个父对象的可见性）/visible(对象可视）/hidden(对象隐藏)

3.overflow溢出
overflow:hidden(溢出部分隐藏）/scroll(滚动条，不隐藏内容）

4.css用户界面样式
鼠标样式：
default–默认箭头
pointer–小手
move–移动
text–文本
not-allowed–禁止
实例：

 <ul>           
  	<li style="cursor: default;">默认</li>      
	<li style="cursor: pointer;">小手</li>   
        <li  style="cursor: move;">移动</li>          
        <li  style=