《CSS揭秘》总结二:css常用样式实现

《CSS揭秘》总结二:css常用样式实现

裁缝效果

在这里插入图片描述

实现思路:使用outline属性,将定义的虚线outline,通过outline-offset往内偏移

 <div class="parent">
    裁缝
  </div>
  
 .parent {
    background: #324057;
    width: 400px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: white;
    font-size: 2rem;
    margin: 100px;
    border-radius: 20px;
    outline: 2px dashed currentColor;
    outline-offset: -20px;
  }

outline的特点:

  • 不贴合border-radio,始终保持直角(被认为是bug,可能未来会修改成贴合)
  • 多边框场景不适用

外直内弯

在这里插入图片描述
实现思路:使用outline搭配box-shadow

<div class="normal parent2">
      外直里弯
    </div>
.parent2 {
    border-radius: 20px;
    background: #ff9b00;
    outline: 20px solid ;
    box-shadow: 0 0 0 20px red;
  }

在这里插入图片描述
最外层是outline,红色的是box-showdow;只要把boxshowdow改成跟outline一样的颜色就可以了。
至于box-show的宽度多少最合适呢?这个是可以通过勾股定理算出来的。
在这里插入图片描述
也就是(r根号2)的宽度

斜条纹背景

知识点:background:linear-gradient(direction, color…);
在这里插入图片描述

横竖条纹都非常简单:

.parent3 {
    background: linear-gradient(to right,cornflowerblue 50%,orange 0);
    background-size: 30px 100%;
  }

思路:首先定义了一般是蓝,一半是橙;但是size确定义了30px;也就是15px蓝,15px橙;再加上默认的repeat;那么就形成了重复条纹了。

斜条纹(有点麻烦):

    background: linear-gradient(45deg,orange 25%, cornflowerblue 25%, cornflowerblue 50%,orange 50%,orange 75%, cornflowerblue 75%,cornflowerblue 0);
    background-size: 60px 60px;

如果没有repeat,他长得样子就像下面这样,由4个条纹组成。
在这里插入图片描述
原理:好像铺地砖一样,这样的条纹板砖拼到一起就是一个连贯条纹的效果。
但是这种方式非常蛋疼,应为你稍微改动下角度的话,这个效果就被破坏了。怎么办?难道又专门为了一个角度去计算这一个小格子的样式吗?显然很麻烦。

接下来用到一个威猛的线性效果,repeat-linear-gradient;是的前面多了个repeat这个单词;

.parent5 {
    background: repeating-linear-gradient(45deg, orange , orange 15px ,cornflowerblue 15px, cornflowerblue 30px);
  }

上面代码的意思是:0-15px是橙,15-30px是蓝;你看到好像多余的颜色设置是为了清除渐变过渡效果。

极简JAVA学习营第五期

01-19
想学好JAVA必须要报两万的培训班吗? 【课程背景】 JAVA是市场份额最大的编程语言,每天各大招聘网站上都会有数万个JAVA开发工程师的在招岗位,但是JAVA的技术体系庞大复杂,要想扎实掌握JAVA不是一件容易的事,线上学习相比线下两万起的高昂费用便宜了很多,而且具备学习时间灵活的优势,但是线上学习的劣势也很明显,没有线下那种学习氛围,碰到问题没法解决,在家学习很容易偷懒,极简JAVA学习营充分考虑到这些问题,通过每日实战编程练习,分队pk,助教答疑,作业点评,作业讲解,项目答辩等诸多环节充分激发你的学习热情,解决你学习中碰到的问题,让你花十分之一的钱学到JAVA的精髓,开启你的人生逆袭之路。 【专项的贴心服务】 1. 学练结合:定期布置视频任务和编程实战练习:通过每天的视频任务统一大家的进度,以便同学更好的交流,针对每天的任务会有相应的编程实战练习,通过练习内化知识。 2. 分队PK:将就业营的同学分成几队,通过作业统计表统计每队提交作业情况进行PK,激发你的学习动力。 3. 助教讲师答疑:碰到任何问题,发到群里,助教和讲师十分钟内帮你解决问题,扫清学习中的障碍。 4. 助教点评讲解作业:你每天提交作业都会有助教进行点评,让你知道有什么问题怎么解决,每三天一次视频讲解作业,互动解答问题 5. 项目答辩:每个阶段学完会有项目答辩,通过做项目巩固前一阶段的知识点,锻炼编码能力。 【往期训练营学习展示】 【套餐内容简介】 本套课以市场就业和职位需求为核心,从JAVA入门到多领域实战,设计出学习路线,共分为十大模块,分别是:JAVA面向对象、Object类与常用API、集合框架、IO流、反射注解、多线程与网络编程、Object类与常用API等等。 同时采用理论讲解加实战演练的方式,既能让学员听懂听明白达到理解透彻,又能够在一个个真实实战案例中,让学员掌握真正有用的开发技能,从而进阶 JAVA 工程师! 套餐中一共包含21门JAVA程,助你从零进阶JAVA工程师! 阶段一:JAVA基础 课程1:《极简JAVA学习营开营篇》 课程2:《极简JAVA:JAVA面向对象》 课程3:《极简JAVA:Object类与常用API》 课程4:《极简JAVA:集合框架》 课程5:《极简JAVA:IO流》 课程6:《极简JAVA:反射注解》 课程7:《极简JAVA:多线程与网络编程》 阶段:数据库入门 课程8:《极简JAVA:MySql数据库》 课程9:《极简JAVA:JDBC与连接池》 阶段三:JAVA WEB 课程10:《极简JAVA:HTML5与CSS3》 课程11:《极简JAVA:极简JAVA十一:Javascript与Jquery》 课程12:《极简JAVA:BootStrap》 课程13:《极简JAVA:JAVA Web》 阶段四:框架实战 课程14:《极简JAVA:Mavean入门》 课程15:《极简JAVA:MyBatis框架》 课程16:《极简JAVA:Spring框架》 课程17:《极简JAVA:Spring Mvc》 课程18:《极简JAVA:Oracle数据库》 课程19:《极简JAVA:Git入门》 课程20:《极简JAVA:Linux入门》 课程21:《极简JAVA:SpringBoot》 【课程特色】 1、易理解:讲师思路清晰、节奏明确、从易到难讲解透彻明白; 2、知识全:知识全面系统,从JAVA入门到实战,由易到难,让你彻底掌握JAVA开发; 3、重实战:涵盖大量实战项目,锻炼你的动手实操能力,面向工作编程; 【面向人群】 1、在校计算机专业或者对软件编程感兴趣的学生; 2、零基础想学JAVA却不知道从何入手 3、囊中羞涩,面对两万起的JAVA培训班不忍直视 4、在职没有每天大块的时间专门学习JAVA 这么细致的服务,这么好的氛围,这样的学习效果,你还等什么?赶紧报名吧,抓紧抢位,本期只招100人,错过只有等时间待定的下一期了
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值