用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. [前端js] 爬取亿图脑图大纲

    这段程序使看到了好的东西,又没有零钱的产物 还是老师让画思维导图我不想画还想白嫖的想法 用时20分钟 就拿这个来作为例子 https://mm.edrawsoft.cn/template/286842 ...

  2. 语法——包、权限修饰符、final

    一.包 1.什么是包? 包是用来分门别类的管理各种不同的类的,类似于文件夹,建包有利于程序的管理和维护. 建包的语法格式: package 公司域名倒写.技术名称.包名建议全部英文小写,且具备意义. ...

  3. （未完成）JAVAWEB学习——

    一.Servlet开发 1.sun公司提供的一种动态web资源开发技术,本质上就要是一段Java小程序,可以将Servlet加入到容器中运行Servlet. *servlet容器 -- 能够运行ser ...

  4. python peewee

    from peewee import MySQLDatabase, Model from peewee import CharField, IntegerField, BooleanField # 引 ...

  5. Codeforces Round #843 (Div. 2) C【思维】

    https://codeforces.com/contest/1775/problem/C 题意 题意是说,给你n和x,你要求出最小的满足要求的m,使得 \(n\)&\((n+1)\)& ...

  6. mysql报错：MySQL server has gone away

    一.报错提示: 二.报错原因: 原因一: 一种可能是发送的 SQL 语句太长,以致超过了 max_allowed_packet 的大小,如果是这种原因,你只要修改 my.cnf,加大 max_allo ...

  7. 分布式事务seata

    1.事务的4大基本特征.   1)原子性   2)一致性   3)隔离性   4)持久性 2.什么是分布式事务? 本地事务:单服务进程,单数据库资源,同一个连接conn多个事务操作. 分布式事务:多服 ...

  8. elasticsearch组件

    elasticsearch组件 Elasticsearch 是一个实时的分布式搜索分析引擎,它能让你以前所未有的速度和规模,去探索你的数据. 它被用作全文检索.结构化搜索.分析以及这三个功能的组合 E ...

  9. html元素全屏展示

    参数传入dom对象即可,注意不是jQuery对象,Vue下兼容 /** * 面板全屏展示 */ fullscreen: function () { if (this.isFullScreen) { / ...

  10. 【Windows】Windows11 安卓子系统安装方法与使用技巧

    安卓子系统 (Windows Subsystem For Android, WSA) 可以说是 Windows11 的最强功能,能在 Windows 系统中体验各种安卓应用.但是有些电脑可能不符合硬件 ...