分享一些关于CSS绘制特殊形状和一些其他小技巧

超、凢脫俗 2022-09-29 15:55 167阅读 0赞

1. 下列代码可以在页面中作出一个三角形

![Center][]

2.  css绘制梯形的代码

![Center 1][]

3. css绘制圆形的代码

![Center 2][]

4.   下面代码可以让P标签（其他标签页可以）中的文字不换行，自动变省略号（注意一定要一起写）

.![Center 3][]

5. 可以让文字强制换行；

![Center 4][]

6.opaciy设置半透明，filter兼容ie6.PNG ； 也可以用rgba（）属性设置透明

![Center 5][]

7.  清除浮动有很多方法，例如给父元素设置宽高，或者用over-flow:hidden，也可以用伪元素清除浮动，如下图代码（最好是都写上）

![Center 6][]

8. 给标签添加上类似a标签小手点击的效果的小属性

![Center 7][]

9. CSS3中的一个很好用的属性，给元素设置padding值后，不用重新改宽高，用下面的代码就能很轻松解决元素宽高改变的问题

![Center 8][]

还有很多很多比较实用的小属性，以后慢慢给大家介绍啦~！

[Center]: /images/20220708/4c7e7f146fb144c2b65e4385389325c4.png
[Center 1]: /images/20220708/0866d0eb676345c79dc715c9796a48ec.png
[Center 2]: /images/20220708/504e5060ba794f5ca9b8584182530328.png
[Center 3]: /images/20220708/ee2cbef03f1c42adaffdec6c08f30560.png
[Center 4]: /images/20220708/5aa6db8eb3344800aa9bd2686c9bf195.png
[Center 5]: /images/20220708/5f7bf5ce2d1747a3b9b9948051357d70.png
[Center 6]: /images/20220708/422d33236cc64924844abb0833d42b3d.png
[Center 7]: /images/20220708/2016b15d43ed44898557979ea5d17c9d.png
[Center 8]: /images/20220708/438e70db642141a6bd716988fbbefff3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

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

相关阅读

相关分享一些自己的学习经验和技巧

毕业两年多，工作三年多，技术水平也不是什么出类拔萃，万里挑一的地步，从最初的Java工程师，到产品，再到大数据，到最后的运维工程师，研发工程师，短短三年多，总是在各个方向突破自

女爷i/ 2023年01月10日 01:18/ 0 赞/ 166 阅读

相关一些JS优化小技巧

1. if多条件判断如果if里面包含多个判断条件，可以把判断条件存到一个数组，然后在去这个数组中检索”输入的值“是否满足条件； // 冗余 if (x

红太狼/ 2022年10月25日 15:29/ 0 赞/ 212 阅读

相关分享一些关于CSS绘制特殊形状和一些其他小技巧

1. 下列代码可以在页面中作出一个三角形 ![Center][] 2. css绘制梯形的代码 ![Center 1][] 3. css绘制圆形的代

超、凢脫俗/ 2022年09月29日 15:55/ 0 赞/ 168 阅读

相关 sublime text 一些小技巧

Package Control 安装方法首先通过快捷键 ctrl+\` 或者 View > Show Console 打开控制台，然后粘贴相应的 Python 安装代码

电玩女神/ 2022年08月06日 07:17/ 0 赞/ 199 阅读

相关操作animate.css的一些小技巧

animate.css是一个不错的css3动态样式文件，它利用keyframes封装了很多动态样式。具体的可以到[官网查看][Link 1] ![这里写图片描述][70]

谁践踏了优雅/ 2022年05月26日 01:44/ 0 赞/ 286 阅读

相关 Fiddler使用一些小技巧

文章目录前言过滤域名打开能HTTPS协议的捕获 Fiddler抓取不了360，firefox浏览器包解决办法 360浏览器 fi

太过爱你忘了你带给我的痛/ 2022年04月04日 03:14/ 0 赞/ 557 阅读

相关关于UINavigationController的一些技巧

[关于UINavigationController的一些技巧][UINavigationController] 未自定义任何东西的导航条效果如下： ![731437-2

迷南。/ 2022年03月22日 11:25/ 0 赞/ 214 阅读

相关 ionic3 一些小技巧

原文出处：[https://www.jianshu.com/p/2b2d3d44861c][https_www.jianshu.com_p_2b2d3d44861c] 没有右

绝地灬酷狼/ 2022年02月26日 00:42/ 0 赞/ 259 阅读

相关 CSS 绘制各种形状

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状和组合形状来说

骑猪看日落/ 2022年02月19日 01:01/ 0 赞/ 326 阅读

相关 css 一些小笔记

针对IE6 的浮动加 display：inline 子元素 position：relative; overflow:hidden 失效 ,需在父元素上同样加上

旧城等待，/ 2021年10月19日 08:44/ 0 赞/ 277 阅读