用shape-outside实现文字环绕

  • 实现效果：

  • 介绍：shape-outside是让文字从图片外部开始环绕，以及设置图片的形状。
  • 函数定义：
  1. circle(size at x y);用于制作圆形size可以是%,px,rem,v*
  2. ellipse(size);用于制作椭圆形
  3. inset(top,right,bottom,left,round);矩形 前四个参数可缩写如padding格式
  4. polygon(x1 y1,x2 y2,x3 y3);多边形
  5. url();从图像中提取形状，图像限于透明图片
  • Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

</head>

<style>

    .block{

        width: 300px;

        height: 50px;

        margin: 20px auto;

    }

    .img{

        width: 200px;

        height: 200px;

        float: left;

        shape-outside: circle();

        clip-path: circle();

        background-color: pink;

    }

</style>

<body>

<div class="block">

    <div class='img'>

    </div>

    <div class="font">加好久好久好久好久好久考核计划的回复我会和符号位胡吴海

        峰吴红红芜湖和黑偶然黑哦温和的齐全哦我和叫哦后和皇后和同和和和和阿斯蒂

        芬基本都是看不出窗口事件笔记本求</div>

</div>

</body>

</html>

注意：clip-path 属性可以将元素裁剪为基本形状或 SVG 源。

CSS色彩渐变

  • 介绍：conic-gradient() 函数，创建一个由渐变组成的图像。

    圆锥渐变是颜色过渡围绕中心点旋转，而不是从中心向外辐射。创建圆锥渐变至少需要设置两个色标。

彩虹圆盘

  • 实现效果：

  • Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

    <style>

        .block{

            width:200px;

            height:200px;

            border-radius:100px;

            background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg);

        }

    </style>

</head>

<body>

<div class="block">

</div>

</body>

</html>

饼图

  • 实现效果：

  • html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

    <style>

        .block{

            width:200px;

            height:200px;

            border-radius:100px;

            background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg);

        }

    </style>

</head>

<body>

<div class="block">

</div>

</body>

</html>

注意：red 0deg,red 30deg指的是红色是从多少度到多少度。

指定背景如何附着在容器上

  • 介绍：使用background-attachment属性。
  • 属性值：
值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。
inherit 指定 background-attachment 的设置应该从父元素继承。

长度单位vh

  • 介绍：实现根据视口的高度，自适应某一部分的高度，表示相对视口高度。视口被均分为100单位的vh，即1vh = 1% * 视口高度。可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的问题。

　　如：width:10px，可改成width:10vh。

用shape-outside实现文字环绕、CSS圆锥色彩渐变、指定背景在容器上如何附着、长度单位vh的更多相关文章

  1. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  2. 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  3. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  4. HTML/CSS实现文字环绕图片布局

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  5. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  6. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  7. CoreText实现图文混排之文字环绕及点击算法

    系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...

  8. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

  9. WPF 在绘图控件(Shape)中添加文字 [2018.7.15]

    原文:WPF 在绘图控件(Shape)中添加文字 [2018.7.15] Q:使用Shape的子类Ellipse画一个圆,如何在圆中添加文字? A:Shape类中不包含Text属性.可使用Shape类 ...

  10. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

随机推荐

  1. 00_k8s_learn

    10本 Kubernetes 学习书籍推荐 - 知乎 https://zhuanlan.zhihu.com/p/468291559 Helm 的安装使用 · 从 Docker 到 Kubernetes ...

  2. drf Serializer基本使用

    drf序列化 在前后端不分离的项目中,可以使用Django自带的forms组件进行数据验证,也可以使用Django自带的序列化组件对模型表数据进行序列化. 那么在前后端分离的项目中,drf也提供了数据 ...

  3. SMW0 对应 MIME TYPE 无法包进请求上传

    SAP Notes - SAP for Me 2228060 - SMW0 Key entry for table MIMETYPES may only be generic Resolution S ...

  4. 写入到Excel表格文件当中，导出/导入数据

    /// <summary> /// 写入到Excel表格文件当中,导出数据 /// </summary> /// <param name="dt"&g ...

  5. 事务(Transaction)逻辑应用

    1.什么是事务? 是一个逻辑工作单元,这个工作单元中的所有操作,要么都成功,要么都失败 2.事务是如何保证数据的正确性的? 通过事务的四大特性:原子性.一致性.隔离性.持久性 原子性(Atomicit ...

  6. uniapp 配置钉钉小程序package.json文件

    { "uni-app": { "scripts": { "mp-dingtalk": { "title": " ...

  7. Java期末课程设计--购物车的GUI（编辑中）

    实现的功能 基本功能 使用admin登录 对商品表内的商品添加至购物车 结算价格 扩展功能 用户的登录注册(基于数据库) 钱包功能 结算前录入地址信息 丰富GUI(指插入图片) 管理员界面(对商品进行 ...

  8. mysql in和find_in_set

    一.查询包含","的列 1.如果查询条件包含单引号 用in 如:select * from t_test where names in ('李红'); 只能查询出names列中值为 ...

  9. js过滤掉指定html标签

    替换标签 var str = "<p><span style='color:#ccc;'>这是测试标签</span><span>这是测试htm ...

  10. 集成GIT仓库

    集成GIT仓库 jgit - java实现git操作 一个 Java 程序中使用 Git ,有一个功能齐全的 Git 库,那就是 JGit . JGit 是一个用 Java 写成的功能相对健全的 Gi ...